This article describes the API migration process of AutoComplete component from Essential JS 1 to Essential JS 2.
MultiSelect concept is not present in EJ2-AutoComplete. If you want to use multiselection support in autocomplete, we suggest you to use MultiSelect component.
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: datasource <EJ.Autocomplete id="default" dataSource = {carList} ></EJ.Autocomplete> |
Property: dataSource<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} dataSource={this.cityData} /> |
| Fields for mapping | Property: fields<EJ.Autocomplete id="default" fields = {fields} ></EJ.Autocomplete> |
Property: fields<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} fields={this.fields} /> |
| Query | Property: query<EJ.Autocomplete id="default" query = {query} ></EJ.Autocomplete> |
Property: query<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} query={this.query} /> |
| Begin event | Event: actionBegin<EJ.Autocomplete id="default" actionBegin = {actionBegin} ></EJ.Autocomplete> |
Event: actionBegin<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} actionBegin={this.actionBegin.bind(this)} /> |
| Complete event | Event: actionComplete<EJ.Autocomplete id="default" actionComplete = {actionComplete} ></EJ.Autocomplete> |
Event: actionComplete <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} actionComplete={this.actionComplete.bind(this)} /> |
| Failure event | Event: actionFailure<EJ.Autocomplete id="default" actionFailure = {actionFailure} ></EJ.Autocomplete> |
Event: actionFailure <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} actionFailure={this.actionFailure.bind(this)} /> |
| Success event | Event: actionSuccess <EJ.Autocomplete id="default" actionSuccess = {actionSuccess} ></EJ.Autocomplete> |
Not Applicable |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Case sensitivity | Property: caseSensitiveSearch<EJ.Autocomplete id="default" caseSensitiveSearch = {true} ></EJ.Autocomplete> |
Property: ignoreCase<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} ignoreCase={true} /> |
| Accent effective search | Not applicable | Property : ignoreAccent <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} ignoreAccent={true} /> |
| Filtering Type | Property: filterType<EJ.Autocomplete id="default" filterType = {filterType} ></EJ.Autocomplete> |
Property: filterType<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} filterType={this.filterType} /> |
| Autofill | Property: enableAutoFill<EJ.Autocomplete id="default" enableAutoFill = {true} ></EJ.Autocomplete> |
Property:: autoFill <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} autoFill={true} /> |
| Highlight the search word | Property: highlightSearch <EJ.Autocomplete id="default" highlightSearch = {true} ></EJ.Autocomplete> |
Property: highlight <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} highlight={true} /> |
| No of items to be shown | Property: itemsCount<EJ.Autocomplete id="default" itemsCount = {itemsCount} ></EJ.Autocomplete> |
Property: suggestionCount<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} suggestionCount={this.suggestionCount} /> |
| Minimum characters to enter | Property: minCharacter<EJ.Autocomplete id="default" minCharacter = {minCharacter} ></EJ.Autocomplete> |
Property: minLength <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} minLength={this.minLength} /> |
| Search | Method: search <EJ.Autocomplete id="autocomplete" ></EJ.Autocomplete>$("#autocomplete").ejAutocomplete("search"); |
Not applicable |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Watermark text | Property: watermarkText <EJ.Autocomplete id="default" watermarkText = {watermarkText} ></EJ.Autocomplete> |
Property: placeholder <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} placeholder={this.placeholder} /> |
| Floating of watermark text | Not applicable | Property: floatLabelType <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} floatLabelType={this.floatLabelType} /> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| No records text | Property: emptyResultText <EJ.Autocomplete id="default" emptyResultText = {emptyResultText} ></EJ.Autocomplete> |
Property: noRecordsTemplate<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} noRecordsTemplate={this.noRecordsTemplate} /> |
| No records showing | Property: showEmptyResultText<EJ.Autocomplete id="default" showEmptyResultText = {true} ></EJ.Autocomplete> |
Not applicable |
| Popupbutton | Property: showPopupButton<EJ.Autocomplete id="default" showPopupButton = {showPopupButton} ></EJ.Autocomplete> |
Property: showPopupButton<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} showPopupButton={this.showPopupButton} /> |
| Clear button | Property: showResetIcon <EJ.Autocomplete id="default" showResetIcon = {showResetIcon} ></EJ.Autocomplete> |
Property: showClearButton <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} showClearButton={this.showClearButton} /> |
| Animation | Property: animateType <EJ.Autocomplete id="default" animateType = {animateType} ></EJ.Autocomplete> |
Not Applicable |
| Focusing the list item | Property: autoFocus<EJ.Autocomplete id="default" autoFocus = {true} ></EJ.Autocomplete> |
Not applicable |
| Delaying the popup open time | Property: delaySuggestionTimeout<EJ.Autocomplete id="default" delaySuggestionTimeout = {delaySuggestionTimeout} ></EJ.Autocomplete> |
Not applicable |
| Popup text when there is no popup items | Property: emptyResultText<EJ.Autocomplete id="default" emptyResultText = {emptyResultText} ></EJ.Autocomplete> |
https://ej2.syncfusion.com/react/demos/#/material/auto-complete/template |
| Enable/disable the duplicate option | Property: enableDistinct<EJ.Autocomplete id="default" enableDistinct = {true} ></EJ.Autocomplete> |
Not applicable |
| Popup height | Property: popupHeight<EJ.Autocomplete id="default" popupHeight = {popupHeight} ></EJ.Autocomplete> |
Property: popupHeight <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} popupHeight={this.popupHeight} /> |
| Popup Width | Property: popupWidth<EJ.Autocomplete id="default" popupWidth = {popupWidth} ></EJ.Autocomplete> |
Property: popupWidth <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} popupWidth={this.popupWidth} /> |
| Open popup | Method: open<EJ.Autocomplete id="autocomplete" ></EJ.Autocomplete>$("#autocomplete").ejAutocomplete("open"); |
Method: showPopup<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} />this.cmbObj.showPopup(); |
| Close event | Event: close<EJ.Autocomplete id="autocomplete" close = "close" ></EJ.Autocomplete> |
Event: close <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} close={this.close.bind(this)} /> |
| Open event | Event: open<EJ.Autocomplete id="autocomplete" open="open"></EJ.Autocomplete> |
Event: open <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} open={this.open.bind(this)} /> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: cssClass <EJ.Autocomplete id="autocomplete" cssClass="cssClass"></EJ.Autocomplete> |
Property: cssClass <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} cssClass={this.cssClass} /> |
| Height | Property: height <EJ.Autocomplete id="autocomplete" height="400px"></EJ.Autocomplete> |
Acheivable through the cssClass property. |
| showRoundedCorner | Property: showRoundedCorner<EJ.Autocomplete id="autocomplete" showRoundedCorner={true}></EJ.Autocomplete> |
Acheivable through the cssClass property. |
| Width | Property: width <EJ.Autocomplete id="autocomplete" width="300px"></EJ.Autocomplete> |
Property: width <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} width={this.width} /> |
| Visibility | Property: visible <EJ.Autocomplete id="autocomplete" visible={true}></EJ.Autocomplete> |
Acheivable through the cssClass property. |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: fields<EJ.Autocomplete id="default" fields = {fields} ></EJ.Autocomplete> |
Property: fields <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} fields={this.fields} /> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: Locale <EJ.Autocomplete id="default" locale = {"fr-FE"} ></EJ.Autocomplete> |
Property: Locale <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} locale={this.locale} /> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: template <EJ.Autocomplete id="default" template = {template} ></EJ.Autocomplete> |
Property: itemTemplate<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} itemTemplate={this.itemTemplate} /> |
| Group Template | Not Applicable | Property: groupTemplate <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} groupTemplate={this.groupTemplate} /> |
| ValueTemplate | Not applicable | Property: valueTemplate <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} valueTemplate={this.valueTemplate} /> |
| Header Template | Not applicable | Property: headerTemplate <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} headerTemplate={this.headerTemplate} /> |
| FooterTemplate | Not applicable | Property: footerTemplate <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} footerTemplate={this.footerTemplate} /> |
| No records Template | Not applicable | Property: noRecordsTemplate <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} noRecordsTemplate={this.noRecordsTemplate} /> |
| Action failure Template | Not applicable | Property: actionFailureTemplate <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} actionFailureTemplate={this.actionFailureTemplate} /> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: allowSorting <EJ.Autocomplete id="default" allowSorting = {true} ></EJ.Autocomplete> |
Acheivable through sortOrder property |
| Order of sorting | Property: sortOrder <EJ.Autocomplete id="default" sortOrder = {sortOrder} ></EJ.Autocomplete> |
Property: sortOrder<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} sortOrder={this.sortOrder} /> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| RTL support | Property: enableRtl <EJ.Autocomplete id="default" enableRtl = {true} ></EJ.Autocomplete> |
Property: enableRtl <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} enableRtl={this.enableRtl} /> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Selecting particular value | Property: selectValueByKey <EJ.Autocomplete id="default" selectValueByKey = {selectValueByKey} ></EJ.Autocomplete> |
Achievable through value property. |
| Selecting particular value | Property: value<EJ.Autocomplete id="default" value = {value} ></EJ.Autocomplete> |
Property: value<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} value={this.value} /> |
| Selecting particular text | Property: text<EJ.Autocomplete id="default" text = {text} ></EJ.Autocomplete> |
Not Applicable |
| Selecting particular value | Method: selectValueByKey<EJ.Autocomplete id="autocomplete" enableRtl = {true} ></EJ.Autocomplete>$("#autocomplete").selectValueByKey("key") |
Achievable through value property. |
| Selecting particular text | Method: selectValueByText <EJ.Autocomplete id="autocomplete" enableRtl = {true} ></EJ.Autocomplete>$("#autocomplete").selectValueByText("key") |
Not applicable |
| Select event | Event: select<EJ.Autocomplete id="default" select = "select" ></EJ.Autocomplete> |
Event: select <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} select={this.select.bind(this)} /> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enable/disable | Property: enabled<EJ.Autocomplete id="default" enabled = {true} ></EJ.Autocomplete> |
Property: enabled <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} enabled={true} /> |
| Enable persistence | Property: enablePersistence<EJ.Autocomplete id="default" enablePersistence = {true} ></EJ.Autocomplete> |
Property: enablePersistence <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} enablePersistence={true} /> |
| Loading icon | Property: showLoadingIcon <EJ.Autocomplete id="default" showLoadingIcon = {true} ></EJ.Autocomplete> |
By default,it is showing |
| Read only | Property: readOnly <EJ.Autocomplete id="default" readOnly = {true} ></EJ.Autocomplete> |
Property: readOnly <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} readOnly={this.readOnly} /> |
| Disable | Method: disable<EJ.Autocomplete id="autocomplete"></EJ.Autocomplete>$("#autocomplete").ejAutoComplete("disable"); |
Achievable through enabled property. |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Addition of new option watermark text | Property: addNewText<EJ.Autocomplete id="default" addNewText = {addNewText} ></EJ.Autocomplete> |
Not applicable |
| Addition of new item | Property: allowAddNew <EJ.Autocomplete id="default" allowAddNew = {true} ></EJ.Autocomplete> |
Property: allowCustom<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} allowCustom={true} /> |
| Reset the autocomplete | Property: showResetIcon <EJ.Autocomplete id="default" showResetIcon = {true} ></EJ.Autocomplete> |
Property: showClearIcon <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} showClearIcon={true} /> |
| Destroy | Method: destroy<EJ.Autocomplete id="autocomplete" ></EJ.Autocomplete>$("#autocomplete").ejAutoComplete("destroy"); |
Method: destroy <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} />this.cmbObj.destroy(); |
| Reset the autocomplete | Method: clearText<EJ.Autocomplete id="autocomplete" ></EJ.Autocomplete>$("#autocomplete").ejAutoComplete("clearText"); |
Property: value <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} value="" /> |
| Multicolumn | Property: multiColumnSettingsvar autocompleteInstance =new ej.Autocomplete($("#selectCar"), {multiColumnSettings:{enable:true,showHeader:true,stringFormat:"{1}",searchColumnIndices[0,1,2], columns:[{"field": "EmployeeID" ,"headerText":"EmployeeID"},{"field": "FirstName" , "headerText":"FirstName"},{"field": "City" , "headerText":"City"}]}}); |
Not applicable |
| Hide the Autocomplete | Method: hide<EJ.Autocomplete id="autocomplete" ></EJ.Autocomplete>$("#autocomplete").ejAutoComplete("hide"); |
Acheivable through the cssClass property. |
| Getting particular text | Method: getActiveText <EJ.Autocomplete id="autocomplete" ></EJ.Autocomplete>$("#autocomplete").ejAutoComplete("getActiveText"); |
Not applicable |
| Getting particular value | Method: getValue<EJ.Autocomplete id="autocomplete" ></EJ.Autocomplete>$("#autocomplete").ejAutoComplete("getValue"); |
Achievable through value property. |
| Change event | Event: change<EJ.Autocomplete id="default" change = "change" ></EJ.Autocomplete> |
Event: change <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} change={this.change.bind(this)} /> |
| Create event | Event: create <EJ.Autocomplete id="default" create = "create" ></EJ.Autocomplete> |
Event: created <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} created={this.created.bind(this)} /> |
| Destroy event | Event: destroy <EJ.Autocomplete id="default" destroy = "destroy" ></EJ.Autocomplete> |
Event: destroyed <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} destroyed={this.destroyed.bind(this)} /> |
| Focus out event | Event: focusOut<EJ.Autocomplete id="default" focusOut = "focusOut" ></EJ.Autocomplete> |
Event: blur <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} blur={this.blur.bind(this)} /> |
| Focus in event | Event : focusIn<EJ.Autocomplete id="default" focusIn = "focusIn" ></EJ.Autocomplete> |
Event: focus <AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} focus={this.focus.bind(this)} /> |