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 datasource="(IEnumerable<CarsList>)ViewBag.datasource"></ej-autocomplete> |
Property: datasource<ejs-autocomplete datasource="@ViewBag.data"></ejs-autocomplete> |
| Fields for mapping | Property: e-autocomplete-fields<ej-autocomplete id="autocomplete" ><e-autocomplete-fields text="Text" key="UniqueKey" /></ej-autocomplete> |
Property: e-autocomplete-fields<ejs-autocomplete id="country"><e-autocomplete-fields value="name" text="code"></e-autocomplete-fields></ejs-autocomplete> |
| Query | Property: query<ej-autocomplete id="autocomplete" query="ej.Query().from('Customers').take(10)"></ej-autocomplete> |
Property: query<ejs-autocomplete id="autocomplete" query="ej.Query().from('Customers').take(10)"></ejs-autocomplete> |
| Begin event | Event: action-begin<ej-autocomplete id="autocomplete" action-begin="onBegin"></ej-autocomplete> |
Event: actionBegin<ejs-autocomplete id="autocomplete" actionBegin="onBegin"></ejs-autocomplete> |
| Complete event | Event: action-complete<ej-autocomplete id="autocomplete" action-complete="onComplete"></ej-autocomplete> |
Event: actionComplete <ejs-autocomplete id="autocomplete" actionComplete="onComplete"></ejs-autocomplete> |
| Failure event | Event: action-failure<ej-autocomplete id="autocomplete" action-failure="onFailure"></ej-autocomplete> |
Event: actionFailure <ejs-autocomplete id="autocomplete" actionFailure="onFailure"></ejs-autocomplete> |
| Success event | Event: action-sucess <ej-autocomplete id="autocomplete" action-Success="onSuccess"></ej-autocomplete> |
Not Applicable |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Case sensitivity | Property: case-sensitive-search<ej-autocomplete id="autocomplete" case-sensitive-search="true"></ej-autocomplete> |
Property: ignoreCase<ejs-autocomplete id="autocomplete" ignoreCase="true"></ejs-autocomplete> |
| Accent effective search | Not applicable | Property : ignoreAccent ejs-autocomplete id="autocomplete" ignoreAccent="true"></ejs-autocomplete> |
| Filtering Type | Property: filter-type<ej-autocomplete id="autocomplete" filter-type=(FilterType.Contains)></ej-autocomplete> |
Property: filterType<ejs-autocomplete id="autocomplete" filterType="StartsWith"></ejs-autocomplete> |
| Autofill | Property: enable-auto-fill<ej-autocomplete id="autocomplete" enable-auto-fill="true"></ej-autocomplete> |
Property:: autoFill ejs-autocomplete id="autocomplete" autoFill="true"></ejs-autocomplete> |
| Highlight the search word | Property: highlight-search <ej-autocomplete id="autocomplete" highlight-search="true"></ej-autocomplete> |
Property: highlight ejs-autocomplete id="autocomplete" highlight="true"></ejs-autocomplete> |
| No of items to be shown | Property: items-count<ej-autocomplete id="autocomplete" items-count=2></ej-autocomplete> |
Property: suggestionCount<ejs-autocomplete id="autocomplete" suggestionCount="5"></ejs-autocomplete> |
| Minimum characters to enter | Property: min-character<ej-autocomplete id="autocomplete" min-character=2></ej-autocomplete> |
Property: minLength ejs-autocomplete id="autocomplete" minLength="3"></ejs-autocomplete> |
| 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: watermark-text <ej-autocomplete id="autocomplete" watermark-text="select"></ej-autocomplete> |
Property: placeholder ejs-autocomplete id="autocomplete" placeholder="select"></ejs-autocomplete> |
| Floating of waterMarkText | Not applicable | Property: floatLabelType ejs-autocomplete id="autocomplete" floatLabelType="auto"></ejs-autocomplete> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| No records text | Property: empty-result-text <ej-autocomplete id="autocomplete" empty-result-text="no records"></ej-autocomplete> |
Property: noRecordsTemplate<ejs-autocomplete id="autocomplete" noRecordsTemplate="@Html.Raw("<span class='norecord'> NO DATA AVAILABLE</span>")"></ejs-autocomplete> |
| No records showing | Property: *show-empty-result-text<ej-autocomplete id="autocomplete" show-empty-result-text="no records"></ej-autocomplete> |
Not applicable |
| Popupbutton | Property: show-popup-button<ej-autocomplete id="autocomplete" show-popup-button="true"></ej-autocomplete> |
Property: showPopupButton<ej-autocomplete id="autocomplete" showPopupButton="true"></ej-autocomplete> |
| Clear button | Property: show-reset-icon <ej-autocomplete id="autocomplete" show-reset-icon="true"></ej-autocomplete> |
Property: showClearButton <ej-autocomplete id="autocomplete" show-clear-button="true"></ej-autocomplete> |
| Animation | Property: animate-type <ej-autocomplete id="autocomplete" animate-type=AnimateType.none></ej-autocomplete> |
Not Applicable |
| Focusing the list item | Property: auto-focus<ej-autocomplete id="autocomplete" auto-focus="true"></ej-autocomplete> |
Not applicable |
| Delaying the popup open time | Property: delay-suggestion-timeout<ej-autocomplete id="autocomplete" delay-suggestion-timeout=500></ej-autocomplete> |
Not applicable |
| Popup text when there is no popup items | Property: empty-result-text<ej-autocomplete id="autocomplete" empty-result-text="no records"></ej-autocomplete> |
https://ej2.syncfusion.com/aspnetcore/AutoComplete/Template#/material |
| Enable/disable the duplicate option | Property: enable-distinct<ej-autocomplete id="autocomplete" enable-distinct="true"></ej-autocomplete> |
Not applicable |
| Popup height | Property: popup-height<ej-autocomplete id="autocomplete" popup-height="300px"></ej-autocomplete> |
Property: popupHeight <ejs-autocomplete id="autocomplete" popupHeight="300px"></ejs-autocomplete> |
| Popup Width | Property: popup-width<ej-autocomplete id="autocomplete" popup-width="300px"></ej-autocomplete> |
Property: popupWidth <ej-autocomplete id="autocomplete" popupWidth="300px"></ej-autocomplete> |
| Open popup | Method: open<ej-autocomplete id="autocomplete"></ej-autocomplete>$("#autocomplete").ejAutocomplete("open"); |
Method: showPopup<ej-autocomplete id="autocomplete"></ej-autocomplete>$("#autocomplete").ejAutocomplete("open"); |
| Close event | Event: close<ej-autocomplete id="autocomplete" close="onClose"></ej-autocomplete> |
Event: close <ej-autocomplete id="autocomplete" close="onClose"></ej-autocomplete> |
| Open event | Event: open<ej-autocomplete id="autocomplete" open="onOpen"></ej-autocomplete> |
Event: open <ej-autocomplete id="autocomplete" open="onOpen"></ej-autocomplete> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: css-class <ej-autocomplete id="autocomplete" css-class="customclass"></ej-autocomplete> |
Property: cssClass <ej-autocomplete id="autocomplete" cssClass="customClass"></ej-autocomplete> |
| Height | Property: height <ej-autocomplete id="autocomplete" height="300px"></ej-autocomplete> |
By using css-class property, you can acheive this. |
| showRoundedCorner | Property: show-rounded-corner<ej-autocomplete id="autocomplete" show-rounded-corner="true"></ej-autocomplete> |
By using css-class property, you can acheive this. |
| Width | Property: width <ej-autocomplete id="autocomplete" width="300px"></ej-autocomplete> |
Property: width <ej-autocomplete id="autocomplete" width="300px"></ej-autocomplete> |
| Visibility | Property: visible <ej-autocomplete id="autocomplete" visisble="true"></ej-autocomplete> |
By using css-class property, you can acheive this. |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: fields.groupBy<ej-autocomplete id="autocomplete"><e-autocomplete-fields group-by="Text" /></ej-autocomplete> |
Property: fields.groupBy <ejs-autocomplete id="country"><e-autocomplete-fields groupBy="name"></e-autocomplete-fields></ejs-autocomplete> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: locale <ej-autocomplete id="autocomplete" locale="fr-FE"></ej-autocomplete> |
Property: locale <ejs-autocomplete id="country" locale="fr-FE"></ejs-autocomplete> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: template <ej-autocomplete id="autocomplete" template="@Html.Raw("<span><span class='name'>${FirstName}</span><span class ='city'>${City}</span></span>")">></ej-autocomplete> |
Property: itemTemplate<ejs-autocomplete id="employees" itemTemplate="@Html.Raw("<span><span class='name'>${FirstName}</span><span class ='city'>${City}</span></span>")">></ejs-autocomplete> |
| Group Template | Not Applicable | Property: groupTemplate <ejs-autocomplete id="employees" groupTemplate="@Html.Raw("<strong>${City}</strong>")"></ejs-autocomplete> |
| ValueTemplate | Not applicable | Property: valueTemplate <ejs-autocomplete id="employees" valueTemplate="data"></ejs-autocomplete> |
| Header Template | Not applicable | Property: headerTemplate <ejs-autocomplete id="employees" headerTemplate="@Html.Raw("<span class='head'><span class='name'>Name</span><span class='city'>City</span></span>")"></ejs-autocomplete> |
| FooterTemplate | Not applicable | Property: footerTemplate <ejs-autocomplete id="employees" footerTemplate="@Html.Raw( "<span class='foot'> Total list items: " + 7 + "</span>")"></ejs-autocomplete> |
| No records Template | Not applicable | Property: noRecordsTemplate <ejs-autocomplete id="employees" noRecordsTemplate="@Html.Raw("<span class='norecord'> NO DATA AVAILABLE</span>")"></ejs-autocomplete> |
| Action failure Template | Not applicable | Property: actionFailureTemplate <ejs-autocomplete id="employees" actionFailureTemplate="@Html.Raw("<div class=\"header\"> <span>Photo</span> <span class=\"info\">Employee Info</span></div>)")"></ejs-autocomplete> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: allow-sorting <ej-autocomplete id="autocomplete" allow-sorting="true"></ej-autocomplete> |
It is applicable when the sortOrder is defined. |
| Order of sorting | Property: sort-order <ej-autocomplete id="autocomplete" sort-order="Ascending"></ej-autocomplete> |
Property: sortOrder<ejs-autocomplete id="country" sortOrder="Ascending"></ejs-autocomplete> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| RTL support | Property: enable-rtl <ej-autocomplete id="autocomplete" enable-rtl="true"></ej-autocomplete> |
Property: enableRtl <ejs-autocomplete id="country" enableRtl="true"></ejs-autocomplete> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Selecting particular value | Property: select-value-by-key <ej-autocomplete id="autocomplete" selectValueByKey="13"></ej-autocomplete> |
Achievable through value property |
| Selecting particular value | Property: value<ej-autocomplete id="autocomplete" value="data"></ej-autocomplete> |
Property: value<ejs-autocomplete id="country" value="data"></ejs-autocomplete> |
| Selecting particular text | Property: text<ej-autocomplete id="autocomplete" text="data"></ej-autocomplete> |
By using text property, you can acheive this. |
| Selecting particular value | Method: selectValueByKey<ej-autocomplete id="autocomplete" ></ej-autocomplete>$("#autocomplete").selectValueByKey("key") |
Achievable through value property |
| Selecting particular text | Method: selectValueByText <ej-autocomplete id="autocomplete" ></ej-autocomplete>$("#autocomplete").selectValueByText("key") |
Achievable through text property |
| Select event | Event: select<ej-autocomplete id="autocomplete" select="onSelect"></ej-autocomplete> |
Event: select <ejs-autocomplete id="country" sortOrder="auto"></ejs-autocomplete> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enable/disable | Property: enabled<ej-autocomplete id="autocomplete" enabled="true"></ej-autocomplete> |
Property: enabled <ejs-autocomplete id="country" enabled="true"></ejs-autocomplete> |
| Enable persistence | Property: enable-persistence<ej-autocomplete id="autocomplete" enable-persistence="true"></ej-autocomplete> |
Property: enablePersistence <ejs-autocomplete id="country" enablePersistence="true"></ejs-autocomplete> |
| Loading icon | Property: show-loading-icon <ej-autocomplete id="autocomplete" show-loading-icon="true"></ej-autocomplete> |
By default,it is showing |
| Read only | Property: read-only <ej-autocomplete id="autocomplete" read-only="true"></ej-autocomplete> |
Property: readOnly <ej-autocomplete id="autocomplete" r="true"></ej-autocomplete> |
| Disable | Method: disable<ej-autocomplete id="autocomplete" read-only="true"></ej-autocomplete>$("#autocomplete").ejAutoComplete("disable"); |
Enabled property can be used here |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Addition of new option watermarktext | Property: add-new-text <ej-autocomplete id="autocomplete" add-new-text="data"></ej-autocomplete> |
Not applicable |
| Addition of new item | Property: allow-add-new <ej-autocomplete id="autocomplete" allow-add-new="true"></ej-autocomplete> |
Property: allowCustom<ej-autocomplete id="autocomplete" allowCustom="true"></ej-autocomplete> |
| Reset the autocomplete | Property: show-reset-icon <ej-autocomplete id="autocomplete" show-reset-icon="true"></ej-autocomplete> |
Property: showClearIcon <ejs-autocomplete id="country" showClearIcon="true"></ejs-autocomplete> |
| Destroy | Method: destroy<ej-autocomplete id="autocomplete" ></ej-autocomplete>$("#autocomplete").ejAutoComplete("destroy"); |
Method: destroy <ejs-autocomplete id="country"></ejs-autocomplete>var autoObj = document.getElementById("country").ej2_Instances[0];autoObj.destroy(); |
| Reset the autocomplete | Method: clearText<ej-autocomplete id="autocomplete" ></ej-autocomplete>$("#autocomplete").ejAutoComplete("clearText"); |
By passing empty value to the value property, you can acheive this |
| Multicolumn | Property: multiColumnSettings<ej-autocomplete id="autocomplete" datasource="ViewBag.datasource"><e-multicolumnsettings enable="true" show-header="true" string-format="{0} ({1})" search-column-indices="@val.SearchColumnIndices"><e-multi-columns><e-multi-column field="UniqueKey" header-text="Unique Key"></e-multi-column><e-multi-column field="Text" header-text="Text"></e-multi-column></e-multi-columns></e-multicolumnsettings></ej-autocomplete> |
Not applicable |
| Hide the Autocomplete | Method: hide<ej-autocomplete id="autocomplete" ></ej-autocomplete>$("#autocomplete").ejAutoComplete("hide"); |
By using css-class property, you can acheive this. |
| Getting particular text | Method: getActiveText <ej-autocomplete id="autocomplete" ></ej-autocomplete>$("#autocomplete").ejAutoComplete("getActiveText"); |
By using text property, you can get it. |
| Getting particular value | Method: getValue<ej-autocomplete id="autocomplete" ></ej-autocomplete>$("#autocomplete").ejAutoComplete("getValue"); |
** By using value property, you can get it.** |
| Change event | Event: change<ej-autocomplete id="autocomplete" change="onChange"></ej-autocomplete> |
Event: change <ejs-autocomplete id="country" change="onChange"></ejs-autocomplete> |
| Create event | Event: create <ej-autocomplete id="autocomplete" change="onChange"></ej-autocomplete> |
Event: created <ejs-autocomplete id="country" created="onCreated"></ejs-autocomplete> |
| Destroy event | Event: destroy <ej-autocomplete id="autocomplete" destroy="onDestroy"></ej-autocomplete> |
Event: destroyed <ejs-autocomplete id="country" destroyed="onDestroy"></ejs-autocomplete> |
| Focus out event | Event: focus-out<ej-autocomplete id="autocomplete" focus-out="onfocusout"></ej-autocomplete> |
Event: blur <ejs-autocomplete id="country" blur="onChange"></ejs-autocomplete> |
| Focus in event | Event : focus-in<ej-autocomplete id="autocomplete" focus-in="onfocus"></ej-autocomplete> |
Event: focus <ejs-autocomplete id="country" focus="onFocus"></ejs-autocomplete> |