Contents
- DataBinding
- Filtering
- Placeholder
- Popup
- CSS
- Grouping
- Localization
- Template
- Sorting
- Accessibility
- Selection
- Miscellaneous
- Common
Having trouble getting help?
Contact Support
Contact Support
Ej1 api migration in React Auto complete component
17 Mar 202518 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)} />
|