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 var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), { dataSource: countriesField,}); |
Property: dataSourcelet groupObj: AutoComplete = new AutoComplete({dataSource: vegetableData,});groupObj.appendTo('#vegetables'); |
| Fields for mapping | Property: fieldsvar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {fields: { key: "index", text: "name" },}); |
Property: fieldslet groupObj: AutoComplete = new AutoComplete({fields: { groupBy: 'Category', value: 'Vegetable' },});groupObj.appendTo('#vegetables'); |
| Query | Property: queryvar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {query: query,}); |
Property: querylet groupObj: AutoComplete = new AutoComplete({query: ej.Query().requiresCount(),});groupObj.appendTo('#vegetables'); |
| Begin event | Event: actionBeginvar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {actionBegin: "actionBegin",}); |
Event: actionBeginlet groupObj: AutoComplete = new AutoComplete({actionBegin: "actionBegin",});groupObj.appendTo('#vegetables'); |
| Complete event | Event: actionCompletevar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {actionComplete: "actionComplete",}); |
Event: actionComplete let groupObj: AutoComplete = new AutoComplete({actionComplete: "actionComplete",});groupObj.appendTo('#vegetables'); |
| Failure event | Event: actionFailurevar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {actionFailure: "actionFailure",}); |
Event: actionFailure let groupObj: AutoComplete = new AutoComplete({actionFailure: "actionFailure",});groupObj.appendTo('#vegetables'); |
| Success event | Event: actionSuccess var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {actionSuccess: "actionSuccess",}); |
Not Applicable |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Case sensitivity | Property: caseSensitiveSearchvar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), { caseSensitiveSearch: true,}); |
Property: ignoreCaselet groupObj: AutoComplete = new AutoComplete({ignoreCase: true,});groupObj.appendTo('#vegetables'); |
| Accent effective search | Not applicable | Property : ignoreAccent let groupObj: AutoComplete = new AutoComplete({ignoreAccent: true,});groupObj.appendTo('#vegetables'); |
| Filtering Type | Property: filterTypevar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), { filterType: "Contains",}); |
Property: filterTypelet groupObj: AutoComplete = new AutoComplete({filterType: filtertype,});groupObj.appendTo('#vegetables'); |
| Autofill | Property: enableAutoFillvar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), { enableAutoFill: true,}); |
Property:: autoFill let groupObj: AutoComplete = new AutoComplete({autoFill: true,});groupObj.appendTo('#vegetables'); |
| Highlight the search word | Property: highlightSearch var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), { highlightSearch: true,}); |
Property: highlight let groupObj: AutoComplete = new AutoComplete({highlight: true,});groupObj.appendTo('#vegetables'); |
| No of items to be shown | Property: itemsCountvar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), { itemsCount: 3,}); |
Property: suggestionCountlet groupObj: AutoComplete = new AutoComplete({suggestionCount: 5,});groupObj.appendTo('#vegetables'); |
| Minimum characters to enter | Property: minCharactervar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), { minCharacter: 3,}); |
Property: minLength let groupObj: AutoComplete = new AutoComplete({minLength: 4,});groupObj.appendTo('#vegetables'); |
| Search | Method: search var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), { });$("#autocomplete").ejAutocomplete("search"); |
Not applicable |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Watermark text | Property: watermarkText var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {watermarkText:"select" }); |
Property: placeholder let groupObj: AutoComplete = new AutoComplete({placeholder: "Select",});groupObj.appendTo('#vegetables'); |
| Floating of watermark Text | Not applicable | Property: floatLabelType let groupObj: AutoComplete = new AutoComplete({floatLabelType: floatLabelType,});groupObj.appendTo('#vegetables'); |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| No records text | Property: emptyResultText var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {emptyResultText:"no records" }); |
Property: noRecordsTemplatelet groupObj: AutoComplete = new AutoComplete({noRecordsTemplate: noRecordsTemplate,});groupObj.appendTo('#vegetables'); |
| No records showing | Property: *showEmptyResultTextvar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {showEmptyResultText:true }) |
Not applicable |
| Popupbutton | Property: showPopupButtonvar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {ShowPopupButton:true }) |
Property: showPopupButtonlet groupObj: AutoComplete = new AutoComplete({showPopupButton: true,});groupObj.appendTo('#vegetables'); |
| Clear button | Property: showResetIcon var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {showResetIcon:true }) |
Property: showClearButton let groupObj: AutoComplete = new AutoComplete({showClearButton: true,});groupObj.appendTo('#vegetables'); |
| Animation | Property: animateType var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {animateType:animateType }) |
Not Applicable |
| Focusing the list item | Property: autoFocusvar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {autoFocus:true }) |
Not applicable |
| Delaying the popup open time | Property: delaySuggestionTimeoutvar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {delaySuggestionTimeout:300 }) |
Not applicable |
| Popup text when there is no popup items | Property: emptyResultTextvar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {emptyResultText:"no Records" }) |
https://ej2.syncfusion.com/demos/#/material/auto-complete/template.html |
| Enable/disable the duplicate option | Property: enableDistinctvar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {enableDistinct:true }) |
Not applicable |
| Popup height | Property: popupHeightvar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {popupHeight:300px }) |
Property: popupHeight let groupObj: AutoComplete = new AutoComplete({popupHeight: 300px,});groupObj.appendTo('#vegetables'); |
| Popup Width | Property: popupWidthvar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {popupWidth:300px }) |
Property: popupWidth let groupObj: AutoComplete = new AutoComplete({popupWidth: 300px,});groupObj.appendTo('#vegetables'); |
| Open popup | Method: openvar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), { })$("#autocomplete").ejAutocomplete("open"); |
Method: showPopuplet groupObj: AutoComplete = new AutoComplete({});groupObj.appendTo('#vegetables');groupObj.showPopup(); |
| Close event | Event: closevar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {close:"onClose" }) |
Event: close let groupObj: AutoComplete = new AutoComplete({close:"close",});groupObj.appendTo('#vegetables'); |
| Open event | Event: openvar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {open:"onopen" }) |
Event: open let groupObj: AutoComplete = new AutoComplete({open:"open",});groupObj.appendTo('#vegetables'); |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: cssClass var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {cssClass:"cssClass" }) |
Property: cssClass let groupObj: AutoComplete = new AutoComplete({cssClass:"cssClass",});groupObj.appendTo('#vegetables'); |
| Height | Property: height var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {height:"300px" }) |
Acheivable through the cssClass property. |
| showRoundedCorner | Property: showRoundedCornervar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {showRoundedCorner:true }) |
Acheivable through the cssClass property. |
| Width | Property: width var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {width:300px }) |
Property: width let groupObj: AutoComplete = new AutoComplete({width:"300px",});groupObj.appendTo('#vegetables'); |
| Visibility | Property: visible var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {visible:true }) |
Acheivable through the cssClass property. |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: fieldsvar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {fields: { key: "index", groupBy: "name" },}); |
Property: fields let groupObj: AutoComplete = new AutoComplete({fields: { groupBy: 'Category', value: 'Vegetable' },});groupObj.appendTo('#vegetables'); |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: Locale var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {lcoale: "fr-FE",}); |
Property: Locale let groupObj: AutoComplete = new AutoComplete({locale: "fr-FE"});groupObj.appendTo('#vegetables'); |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: template var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {template: "<span><span class='name'>${FirstName}</span><span class ='city'>${City}</span></span>"}) |
Property: itemTemplatelet groupObj: AutoComplete = new AutoComplete({itemTemplate: "<span><span class='name'>${FirstName}</span><span class ='city'>${City}</span></span>"});groupObj.appendTo('#vegetables'); |
| Group Template | Not Applicable | Property: groupTemplate let groupObj: AutoComplete = new AutoComplete({groupTemplate: "<strong>${City}</strong>"});groupObj.appendTo('#vegetables'); |
| ValueTemplate | Not applicable | Property: valueTemplate let groupObj: AutoComplete = new AutoComplete({valueTemplate: "<span>${FirstName} - ${City}</span>"});groupObj.appendTo('#vegetables'); |
| Header Template | Not applicable | Property: headerTemplate let groupObj: AutoComplete = new AutoComplete({headerTemplate: "<span class='head'><span class='name'>Name</span><span class='city'>City</span></span>",});groupObj.appendTo('#vegetables'); |
| FooterTemplate | Not applicable | Property: footerTemplate let groupObj: AutoComplete = new AutoComplete({footerTemplate:"<span class='foot'> Total list items: "+ sportsData.length +"</span>"});groupObj.appendTo('#vegetables'); |
| No records Template | Not applicable | Property: noRecordsTemplate let groupObj: AutoComplete = new AutoComplete({noRecordsTemplate:"<span class='norecord'> NO DATA AVAILABLE</span>"});groupObj.appendTo('#vegetables'); |
| Action failure Template | Not applicable | Property: actionFailureTemplate let groupObj: AutoComplete = new 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 var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {allowSorting: true,}); |
Acheivable through sortOrder property |
| Order of sorting | Property: sortOrder var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {sortOrder: "Ascending",}); |
Property: sortOrderlet groupObj: AutoComplete = new AutoComplete({sortOrder: "sortOrder"});groupObj.appendTo('#vegetables'); |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| RTL support | Property: enableRtl var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {enableRtl: true,}); |
Property: enableRtl let groupObj: AutoComplete = new AutoComplete({enableRtl: true});groupObj.appendTo('#vegetables'); |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Selecting particular value | Property: selectValueByKey var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {selectValueByKey: 1,}); |
Acheivable through the cssClass property. |
| Selecting particular value | Property: valuevar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {value: data,}); |
Property: valuelet groupObj: AutoComplete = new AutoComplete({value: "data"});groupObj.appendTo('#vegetables'); |
| Selecting particular text | Property: textvar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {text: "data",}); |
Not applicable |
| Selecting particular value | Method: selectValueByKeyvar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {});$("#autocomplete").selectValueByKey("key") |
Acheivable through the value property. |
| Selecting particular text | Method: selectValueByText var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {});$("#autocomplete").selectValueByText("key") |
Not applicable |
| Select event | Event: selectvar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {select: "onSelect",}); |
Event: select let groupObj: AutoComplete = new AutoComplete({select: "onSelect"});groupObj.appendTo('#vegetables'); |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enable/disable | Property: enabledvar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {enabled: true,}); |
Property: enabled let groupObj: AutoComplete = new AutoComplete({enabled: true});groupObj.appendTo('#vegetables'); |
| Enable persistence | Property: enablePersistencevar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {enablePersistence: true,}); |
Property: enablePersistence let groupObj: AutoComplete = new AutoComplete({enablePersistence: true});groupObj.appendTo('#vegetables'); |
| Loading icon | Property: showLoadingIcon var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {showLoadingIcon: true,}); |
By default,it is showing |
| Read only | Property: readOnly var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {readOnly: true,}); |
Property: readOnly let groupObj: AutoComplete = new AutoComplete({readOnly: true});groupObj.appendTo('#vegetables'); |
| Disable | Method: disablevar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {});$("#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: addNewTextvar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {addNewText:"text"}); |
Not applicable |
| Addition of new item | Property: allowAddNew var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {allowAddNew: true}); |
Property: allowCustomlet groupObj: AutoComplete = new AutoComplete({allowCustom: true});groupObj.appendTo('#vegetables'); |
| Reset the autocomplete | Property: showResetIcon var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {showResetIcon: true}); |
Property: showClearIcon let groupObj: AutoComplete = new AutoComplete({allowCustom: true});groupObj.appendTo('#vegetables'); |
| Destroy | Method: destroyvar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {});$("#autocomplete").ejAutoComplete("destroy"); |
Method: destroy let groupObj: AutoComplete = new AutoComplete({allowCustom: true});groupObj.appendTo('#vegetables');``<br/><br/>groupObj.destroy();` |
| Reset the autocomplete | Method: clearTextvar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {});$("#autocomplete").ejAutoComplete("clearText"); |
By passing empty value to the value property, you can acheive this |
| 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: hidevar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {});$("#autocomplete").ejAutoComplete("hide"); |
By using css-class property, you can acheive this. |
| Getting particular text | Method: getActiveText var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {});$("#autocomplete").ejAutoComplete("getActiveText"); |
By using text property, you can get it. |
| Getting particular value | Method: getValuevar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {});$("#autocomplete").ejAutoComplete("getValue"); |
By using value property, you can get it. |
| Change event | Event: changevar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {change:"change"}); |
Event: change let groupObj: AutoComplete = new AutoComplete({change: "change"});groupObj.appendTo('#vegetables'); |
| Create eventf | Event: create var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {create:"create"}); |
Event: created let groupObj: AutoComplete = new AutoComplete({created: "created"});groupObj.appendTo('#vegetables'); |
| Destroy event | Event: destroy var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {destroy:"destroy"}); |
Event: destroyed let groupObj: AutoComplete = new AutoComplete({destroyed: "destroyed"});groupObj.appendTo('#vegetables'); |
| Focus out event | Event: focusOutvar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {focusOut:"focusOut"}); |
Event: blur let groupObj: AutoComplete = new AutoComplete({blur: "blur"});groupObj.appendTo('#vegetables'); |
| Focus in event | Event : focusInvar autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {focusIn:"focusIn"}); |
Event: focus let groupObj: AutoComplete = new AutoComplete({focus: "focus"});groupObj.appendTo('#vegetables'); |