Ej1 api migration in React Auto complete component
2 Feb 202318 minutes to read
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.
DataBinding
| 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 |
Filtering
| 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 |
Placeholder
| 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} />
|
Popup
| 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)} />
|
CSS
| 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. |
Grouping
| 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} />
|
Localization
| 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} />
|
Template
| 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} />
|
Sorting
| 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} />
|
Accessibility
| 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} />
|
Selection
| 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)} />
|
Miscellaneous
| 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. |
Common
| 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)} />
|