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 $('#autocomplete').ejAutocomplete({ dataSource: countriesField,}); |
Property: dataSourcevar groupObj = new ej.dropdowns.AutoComplete({dataSource: vegetableData,});groupObj.appendTo('#vegetables'); |
| Fields for mapping | Property: fields$('#autocomplete').ejAutocomplete({fields: { key: "index", text: "name" },}); |
Property: fieldsvar groupObj = new ej.dropdowns.AutoComplete({fields: { groupBy: 'Category', value: 'Vegetable' },});groupObj.appendTo('#vegetables'); |
| Query | Property: query$('#autocomplete').ejAutocomplete({query: query,}); |
Property: queryvar groupObj = new ej.dropdowns.AutoComplete({query: ej.Query().requiresCount(),});groupObj.appendTo('#vegetables'); |
| Begin event | Event: actionBegin$('#autocomplete').ejAutocomplete({actionBegin: "actionBegin",}); |
Event: actionBeginvar groupObj = new ej.dropdowns.AutoComplete({actionBegin: "actionBegin",});groupObj.appendTo('#vegetables'); |
| Complete event | Event: actionComplete$('#autocomplete').ejAutocomplete({actionComplete: "actionComplete",}); |
Event: actionComplete var groupObj = new ej.dropdowns.AutoComplete({actionComplete: "actionComplete",});groupObj.appendTo('#vegetables'); |
| Failure event | Event: actionFailure$('#autocomplete').ejAutocomplete({actionFailure: "actionFailure",}); |
Event: actionFailure var groupObj = new ej.dropdowns.AutoComplete({actionFailure: "actionFailure",});groupObj.appendTo('#vegetables'); |
| Success event | Event: actionSuccess $('#autocomplete').ejAutocomplete({actionSuccess: "actionSuccess",}); |
Not Applicable |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Case sensitivity | Property: caseSensitiveSearch$('#autocomplete').ejAutocomplete({ caseSensitiveSearch: true,}); |
Property: ignoreCasevar groupObj = new ej.dropdowns.AutoComplete({ignoreCase: true,});groupObj.appendTo('#vegetables'); |
| Accent effective search | Not applicable | Property : ignoreAccent var groupObj = new ej.dropdowns.AutoComplete({ignoreAccent: true,});groupObj.appendTo('#vegetables'); |
| Filtering Type | Property: filterType$('#autocomplete').ejAutocomplete({ filterType: "Contains",}); |
Property: filterTypevar groupObj = new ej.dropdowns.AutoComplete({filterType: filtertype,});groupObj.appendTo('#vegetables'); |
| Autofill | Property: enableAutoFill$('#autocomplete').ejAutocomplete({ enableAutoFill: true,}); |
Property:: autoFill var groupObj = new ej.dropdowns.AutoComplete({autoFill: true,});groupObj.appendTo('#vegetables'); |
| Highlight the search word | Property: highlightSearch $('#autocomplete').ejAutocomplete({ highlightSearch: true,}); |
Property: highlight var groupObj = new ej.dropdowns.AutoComplete({highlight: true,});groupObj.appendTo('#vegetables'); |
| No of items to be shown | Property: itemsCount$('#autocomplete').ejAutocomplete({ itemsCount: 3,}); |
Property: suggestionCountvar groupObj = new ej.dropdowns.AutoComplete({suggestionCount: 5,});groupObj.appendTo('#vegetables'); |
| Minimum characters to enter | Property: minCharacter$('#autocomplete').ejAutocomplete({ minCharacter: 3,}); |
Property: minLength var groupObj = new ej.dropdowns.AutoComplete({minLength: 4,});groupObj.appendTo('#vegetables'); |
| Search | Method: search $("#autocomplete").ejAutocomplete("search"); |
Not applicable |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Watermark text | Property: watermarkText $('#autocomplete').ejAutocomplete({watermarkText:"select" }); |
Property: placeholder var groupObj = new ej.dropdowns.AutoComplete({placeholder: "Select",});groupObj.appendTo('#vegetables'); |
| Floating of watermark text | Not applicable | Property: floatLabelType var groupObj = new ej.dropdowns.AutoComplete({floatLabelType: floatLabelType,});groupObj.appendTo('#vegetables'); |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| No records text | Property: emptyResultText $('#autocomplete').ejAutocomplete({emptyResultText:"no records" }); |
Property: noRecordsTemplatevar groupObj = new ej.dropdowns.AutoComplete({noRecordsTemplate: noRecordsTemplate,});groupObj.appendTo('#vegetables'); |
| No records showing | Property: showEmptyResultText$('#autocomplete').ejAutocomplete({showEmptyResultText:true }) |
Not applicable |
| Popupbutton | Property: showPopupButton$('#autocomplete').ejAutocomplete({ShowPopupButton:true }) |
Property: showPopupButtonvar groupObj = new ej.dropdowns.AutoComplete({showPopupButton: true,});groupObj.appendTo('#vegetables'); |
| Clear button | Property: showResetIcon $('#autocomplete').ejAutocomplete({showResetIcon:true }) |
Property: showClearButton var groupObj = new ej.dropdowns.AutoComplete({showClearButton: true,});groupObj.appendTo('#vegetables'); |
| Animation | Property: animateType $('#autocomplete').ejAutocomplete({animateType:animateType }) |
Not Applicable |
| Focusing the list item | Property: AutoFocus@Html.EJ().Autocomplete("selectCar").AutoFocus("true") |
Not applicable |
| Delaying the popup open time | Property: delaySuggestionTimeout$('#autocomplete').ejAutocomplete({delaySuggestionTimeout:300 }) |
Not applicable |
| Popup text when there is no popup items | Property: emptyResultText$('#autocomplete').ejAutocomplete({emptyResultText:"no Records" }) |
https://ej2.syncfusion.com/javascript/demos/#/material/auto-complete/template.html |
| Enable/disable the duplicate option | Property: enableDistinct$('#autocomplete').ejAutocomplete({enableDistinct:true }) |
Not applicable |
| Popup height | Property: popupHeight$('#autocomplete').ejAutocomplete({popupHeight:300px }) |
Property: popupHeight var groupObj = new ej.dropdowns.AutoComplete({popupHeight: 300px,});groupObj.appendTo('#vegetables'); |
| Popup Width | Property: popupWidth$('#autocomplete').ejAutocomplete({popupWidth:300px }) |
Property: popupWidth var groupObj = new ej.dropdowns.AutoComplete({popupWidth: 300px,});groupObj.appendTo('#vegetables'); |
| Open popup | Method: open$("#autocomplete").ejAutocomplete("open"); |
Method: showPopupvar groupObj = new ej.dropdowns.AutoComplete({});groupObj.appendTo('#vegetables');groupObj.showPopup(); |
| Close event | Event: close$('#autocomplete').ejAutocomplete({close:"onClose" }) |
Event: close var groupObj = new ej.dropdowns.AutoComplete({close:"close",});groupObj.appendTo('#vegetables'); |
| Open event | Event: open$('#autocomplete').ejAutocomplete({open:"onopen" }) |
Event: open var groupObj = new ej.dropdowns.AutoComplete({open:"open",});groupObj.appendTo('#vegetables'); |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: cssClass $('#autocomplete').ejAutocomplete({cssClass:"cssClass" }) |
Property: cssClass var groupObj = new ej.dropdowns.AutoComplete({cssClass:"cssClass",});groupObj.appendTo('#vegetables'); |
| Height | Property: height $('#autocomplete').ejAutocomplete({height:"300px" }) |
Acheivable through the cssClass property |
| showRoundedCorner | Property: showRoundedCorner$('#autocomplete').ejAutocomplete({showRoundedCorner:true }) |
Acheivable through the cssClass property. |
| Width | Property: width $('#autocomplete').ejAutocomplete({width:300px }) |
Property: width var groupObj = new ej.dropdowns.AutoComplete({width:"300px",});groupObj.appendTo('#vegetables'); |
| Visibility | Property: visible $('#autocomplete').ejAutocomplete({visible:true }) |
Acheivable through the cssClass property. |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: fields$('#autocomplete').ejAutocomplete({fields: { key: "index", groupBy: "name" },}); |
Property: fieldsvar groupObj = new ej.dropdowns.AutoComplete({fields: { groupBy: 'Category', value: 'Vegetable' },});groupObj.appendTo('#vegetables'); |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: Locale $('#autocomplete').ejAutocomplete({lcoale: "fr-FE",}); |
Property: Locale var groupObj = new ej.dropdowns.AutoComplete({locale: "fr-FE"});groupObj.appendTo('#vegetables'); |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: template $('#autocomplete').ejAutocomplete({template: "<span><span class='name'>${FirstName}</span><span class ='city'>${City}</span></span>"}) |
Property: itemTemplatevar groupObj = new ej.dropdowns.AutoComplete({itemTemplate: "<span><span class='name'>${FirstName}</span><span class ='city'>${City}</span></span>"});groupObj.appendTo('#vegetables'); |
| Group Template | Not Applicable | Property: groupTemplate var groupObj = new ej.dropdowns.AutoComplete({groupTemplate: "<strong>${City}</strong>"});groupObj.appendTo('#vegetables'); |
| ValueTemplate | Not applicable | Property: valueTemplate var groupObj = new ej.dropdowns.AutoComplete({valueTemplate: "<span>${FirstName} - ${City}</span>"});groupObj.appendTo('#vegetables'); |
| Header Template | Not applicable | Property: headerTemplate var groupObj = new ej.dropdowns.AutoComplete({headerTemplate: "<span class='head'><span class='name'>Name</span><span class='city'>City</span></span>",});groupObj.appendTo('#vegetables'); |
| FooterTemplate | Not applicable | Property: footerTemplate var groupObj = new ej.dropdowns.AutoComplete({footerTemplate:"<span class='foot'> Total list items: "+ sportsData.length +"</span>"});groupObj.appendTo('#vegetables'); |
| No records Template | Not applicable | Property: noRecordsTemplate var groupObj = new ej.dropdowns.AutoComplete({noRecordsTemplate:"<span class='norecord'> NO DATA AVAILABLE</span>"});groupObj.appendTo('#vegetables'); |
| Action failure Template | Not applicable | Property: actionFailureTemplate var groupObj = new ej.dropdowns.AutoComplete({actionFailureTemplate:"<span class='action-failure'> Data fetch get fails</span>"});groupObj.appendTo('#vegetables'); |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: allowSorting $('#autocomplete').ejAutocomplete({allowSorting: true,}); |
Acheivable through sortOrder property |
| Order of sorting | Property: sortOrder $('#autocomplete').ejAutocomplete({sortOrder: "Ascending",}); |
Property: sortOrdervar groupObj = new ej.dropdowns.AutoComplete({sortOrder: "sortOrder"});groupObj.appendTo('#vegetables'); |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| RTL support | Property: enableRtl $('#autocomplete').ejAutocomplete({enableRtl: true,}); |
Property: enableRtl var groupObj = new ej.dropdowns.AutoComplete({enableRtl: true});groupObj.appendTo('#vegetables'); |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Selecting particular value | Property: selectValueByKey $('#autocomplete').ejAutocomplete({selectValueByKey: 1,}); |
Achievable through value property |
| Selecting particular value | Property: value$('#autocomplete').ejAutocomplete({value: data,}); |
Property: valuevar groupObj = new ej.dropdowns.AutoComplete({value: "data"});groupObj.appendTo('#vegetables'); |
| Selecting particular text | Property: text$('#autocomplete').ejAutocomplete({text: "data",}); |
Not Applicable |
| Selecting particular value | Method: selectValueByKey$("#autocomplete").selectValueByKey("key") |
Achievable through value property |
| Selecting particular text | Method: selectValueByText $("#autocomplete").selectValueByText("key") |
Not Applicable |
| Select event | Event: select$('#autocomplete').ejAutocomplete({select: "onSelect",}); |
Event: select var groupObj = new ej.dropdowns.AutoComplete({select: "onSelect"});groupObj.appendTo('#vegetables'); |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enable/disable | Property: enabled$('#autocomplete').ejAutocomplete({enabled: true,}); |
Property: enabled var groupObj = new ej.dropdowns.AutoComplete({enabled: true});groupObj.appendTo('#vegetables'); |
| Enable persistence | Property: enablePersistence$('#autocomplete').ejAutocomplete({enablePersistence: true,}); |
Property: enablePersistence var groupObj = new ej.dropdowns.AutoComplete({enablePersistence: true});groupObj.appendTo('#vegetables'); |
| Loading icon | Property: showLoadingIcon $('#autocomplete').ejAutocomplete({showLoadingIcon: true,}); |
By default,it is showing |
| Read only | Property: readOnly $('#autocomplete').ejAutocomplete({readOnly: true,}); |
Property: readOnly var groupObj = new ej.dropdowns.AutoComplete({readOnly: true});groupObj.appendTo('#vegetables'); |
| Disable | Method: disable$("#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$('#autocomplete').ejAutocomplete({addNewText:"text"}); |
Not applicable |
| Addition of new item | Property: allowAddNew $('#autocomplete').ejAutocomplete({allowAddNew: true}); |
Property: allowCustomvar groupObj = new ej.dropdowns.AutoComplete({allowCustom: true});groupObj.appendTo('#vegetables'); |
| Reset the autocomplete | Property: showResetIcon $('#autocomplete').ejAutocomplete({showResetIcon: true}); |
Property: showClearIcon var groupObj = new ej.dropdowns.AutoComplete({allowCustom: true});groupObj.appendTo('#vegetables'); |
| Destroy | Method: destroy$("#autocomplete").ejAutoComplete("destroy"); |
Method: destroy var groupObj = new ej.dropdowns.AutoComplete({allowCustom: true});groupObj.appendTo('#vegetables');groupObj.destroy(); |
| Reset the autocomplete | Method: clearText$("#autocomplete").ejAutoComplete("clearText"); |
Property: valuevar groupObj = new ej.dropdowns.AutoComplete({value: ""});groupObj.appendTo('#vegetables'); |
| 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$("#autocomplete").ejAutoComplete("hide"); |
Acheivable through the cssClass property. |
| Getting particular text | Method: getActiveText $("#autocomplete").ejAutoComplete("getActiveText"); |
Not Applicable |
| Getting particular value | Method: getValue$("#autocomplete").ejAutoComplete("getValue"); |
Acheivable through the value property. |
| Change event | Event: change$('#autocomplete').ejAutocomplete({change:"change"}); |
Event: change var groupObj = new ej.dropdowns.AutoComplete({change: "change"});groupObj.appendTo('#vegetables'); |
| Create event | Event: create $('#autocomplete').ejAutocomplete({create:"create"}); |
Event: created var groupObj = new ej.dropdowns.AutoComplete({created: "created"});groupObj.appendTo('#vegetables'); |
| Destroy event | Event: destroy $('#autocomplete').ejAutocomplete({destroy:"destroy"}); |
Event: destroyed var groupObj = new ej.dropdowns.AutoComplete({destroyed: "destroyed"});groupObj.appendTo('#vegetables'); |
| Focus out event | Event: focusOut$('#autocomplete').ejAutocomplete({focusOut:"focusOut"}); |
Event: blur var groupObj = new ej.dropdowns.AutoComplete({blur: "blur"});groupObj.appendTo('#vegetables'); |
| Focus in event | Event : focusIn$('#autocomplete').ejAutocomplete({focusIn:"focusIn"}); |
Event: focus var groupObj = new ej.dropdowns.AutoComplete({focus: "focus"});groupObj.appendTo('#vegetables'); |