Ej1 api migration in EJ2 JavaScript Auto complete control
2 May 202316 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 $('#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 |
Filtering
| 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 |
Placeholder
| 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');
|
Popup
| 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');
|
CSS
| 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. |
Grouping
| 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');
|
Localization
| 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');
|
Template
| 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');
|
Sorting
| 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');
|
Accessibility
| 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');
|
Selection
| 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');
|
Miscellaneous
| 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 |
Common
| 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');
|