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 EJ2 JavaScript Auto complete control
12 Apr 202516 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');
|