Ej1 api migration in EJ2 TypeScript 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
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), { dataSource: countriesField,}); 		Property: dataSource
let groupObj: AutoComplete = new AutoComplete({dataSource: vegetableData,});groupObj.appendTo('#vegetables');
Fields for mapping Property: fields
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {fields: { key: "index", text: "name" },}); 		Property: fields
let groupObj: AutoComplete = new AutoComplete({fields: { groupBy: 'Category', value: 'Vegetable' },});groupObj.appendTo('#vegetables');
Query Property: query
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {query: query,}); 		Property: query
let groupObj: AutoComplete = new AutoComplete({query: ej.Query().requiresCount(),});groupObj.appendTo('#vegetables');
Begin event Event: actionBegin
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {actionBegin: "actionBegin",}); 		Event: actionBegin
let groupObj: AutoComplete = new AutoComplete({actionBegin: "actionBegin",});groupObj.appendTo('#vegetables');
Complete event Event: actionComplete
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {actionComplete: "actionComplete",}); 		Event: actionComplete
let groupObj: AutoComplete = new AutoComplete({actionComplete: "actionComplete",});groupObj.appendTo('#vegetables');
Failure event Event: actionFailure
var 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

Filtering

Behavior API in Essential JS 1 API in Essential JS 2
Case sensitivity Property: caseSensitiveSearch
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), { caseSensitiveSearch: true,}); 		Property: ignoreCase
let 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: filterType
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), { filterType: "Contains",}); 		Property: filterType
let groupObj: AutoComplete = new AutoComplete({filterType: filtertype,});groupObj.appendTo('#vegetables');
Autofill Property: enableAutoFill
var 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: itemsCount
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), { itemsCount: 3,}); 		Property: suggestionCount
let groupObj: AutoComplete = new AutoComplete({suggestionCount: 5,});groupObj.appendTo('#vegetables');
Minimum characters to enter Property: minCharacter
var 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

Placeholder

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: noRecordsTemplate
let groupObj: AutoComplete = new AutoComplete({noRecordsTemplate: noRecordsTemplate,});groupObj.appendTo('#vegetables');
No records showing Property: *showEmptyResultText
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {showEmptyResultText:true }) 		Not applicable
Popupbutton Property: showPopupButton
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {ShowPopupButton:true }) 		Property: showPopupButton
let 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: autoFocus
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {autoFocus:true }) 		Not applicable
Delaying the popup open time Property: delaySuggestionTimeout
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {delaySuggestionTimeout:300 }) 		Not applicable
Popup text when there is no popup items Property: emptyResultText
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {emptyResultText:"no Records" }) 		https://ej2.syncfusion.com/demos/#/material/auto-complete/template.html
Enable/disable the duplicate option Property: enableDistinct
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {enableDistinct:true }) 		Not applicable
Popup height Property: popupHeight
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {popupHeight:300px }) 		Property: popupHeight
let groupObj: AutoComplete = new AutoComplete({popupHeight: 300px,});groupObj.appendTo('#vegetables');
Popup Width Property: popupWidth
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {popupWidth:300px }) 		Property: popupWidth
let groupObj: AutoComplete = new AutoComplete({popupWidth: 300px,});groupObj.appendTo('#vegetables');
Open popup Method: open
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), { })

$("#autocomplete").ejAutocomplete("open"); 		Method: showPopup
let groupObj: AutoComplete = new AutoComplete({});groupObj.appendTo('#vegetables');

groupObj.showPopup();
Close event Event: close
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {close:"onClose" }) 		Event: close
let groupObj: AutoComplete = new AutoComplete({close:"close",});groupObj.appendTo('#vegetables');
Open event Event: open
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {open:"onopen" }) 		Event: open
let groupObj: AutoComplete = new AutoComplete({open:"open",});groupObj.appendTo('#vegetables');

CSS

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: showRoundedCorner
var 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.

Grouping

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: fields
var 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');

Localization

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');

Template

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: itemTemplate
let 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');

Sorting

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: sortOrder
let groupObj: AutoComplete = new AutoComplete({sortOrder: "sortOrder"});groupObj.appendTo('#vegetables');

Accessibility

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');

Selection

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: value
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {value: data,}); 		Property: value
let groupObj: AutoComplete = new AutoComplete({value: "data"});groupObj.appendTo('#vegetables');
Selecting particular text Property: text
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {text: "data",}); 		Not applicable
Selecting particular value Method: selectValueByKey
var 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: select
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {select: "onSelect",}); 		Event: select
let groupObj: AutoComplete = new AutoComplete({select: "onSelect"});groupObj.appendTo('#vegetables');

Miscellaneous

Behavior API in Essential JS 1 API in Essential JS 2
Enable/disable Property: enabled
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {enabled: true,}); 		Property: enabled
let groupObj: AutoComplete = new AutoComplete({enabled: true});groupObj.appendTo('#vegetables');
Enable persistence Property: enablePersistence
var 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: disable
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {});

$("#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
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {addNewText:"text"});|Not applicable |
| Addition of new item | Property: allowAddNew
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {allowAddNew: true});|Property: allowCustom
let 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: destroy
var 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:** *clearText*<br/>var autocompleteInstance =new ej.Autocomplete($(“#autocomplete”), {});<br/><br/>$(“#autocomplete”).ejAutoComplete(“clearText”); | **By passing empty value to the value property, you can acheive this** | | **Multicolumn** | **Property:** *multiColumnSettings*<br/> var autocompleteInstance =new ej.Autocomplete($(“#selectCar”), {multiColumnSettings:{enable:true,showHeader:true,stringFormat:”{1}”,searchColumnIndices[0,1,2],<br/> columns:[{“field”: “EmployeeID” ,”headerText”:”EmployeeID”},{“field”: “FirstName” , “headerText”:”FirstName”},{“field”: “City” , “headerText”:”City”}]}}); |**Not applicable** | | **Hide the Autocomplete** | **Method:** *hide*<br/><br/>var autocompleteInstance =new ej.Autocomplete($(“#autocomplete”), {});<br/><br/>$(“#autocomplete”).ejAutoComplete(“hide”); | **By using *css-class* property, you can acheive this.** | **Getting particular text** | **Method:** *getActiveText* <br/>var autocompleteInstance =new ej.Autocomplete($(“#autocomplete”), {});<br/><br/>$(“#autocomplete”).ejAutoComplete(“getActiveText”);|**By using text property, you can get it.** | | **Getting particular value** | **Method:** *getValue*<br/> var autocompleteInstance =new ej.Autocomplete($(“#autocomplete”), {});<br/><br/>$(“#autocomplete”).ejAutoComplete(“getValue”); |**By using value property, you can get it.** | | **Change event** | **Event:** *change*<br/>var autocompleteInstance =new ej.Autocomplete($(“#autocomplete”), {change:”change”});|**Event:** *change* <br/>let groupObj: AutoComplete = new AutoComplete({change: “change”});groupObj.appendTo(‘#vegetables’);| | **Create eventf** | **Event:** *create* <br/>var autocompleteInstance =new ej.Autocomplete($(“#autocomplete”), {create:”create”});|**Event:** *created* <br/>let groupObj: AutoComplete = new AutoComplete({created: “created”});groupObj.appendTo(‘#vegetables’);| | **Destroy event** | **Event:** *destroy* <br/>var autocompleteInstance =new ej.Autocomplete($(“#autocomplete”), {destroy:”destroy”}); |**Event:** *destroyed* <br/>let groupObj: AutoComplete = new AutoComplete({destroyed: “destroyed”});groupObj.appendTo(‘#vegetables’);| | **Focus out event** | **Event**: *focusOut*<br/>var autocompleteInstance =new ej.Autocomplete($(“#autocomplete”), {focusOut:”focusOut”});| **Event:** *blur* <br/>let groupObj: AutoComplete = new AutoComplete({blur: “blur”});groupObj.appendTo(‘#vegetables’); | | **Focus in event** | **Event** : *focusIn*<br/>var autocompleteInstance =new ej.Autocomplete($(“#autocomplete”), {focusIn:”focusIn”}); | **Event:** *focus* <br/>let groupObj: AutoComplete = new AutoComplete({focus: “focus”});groupObj.appendTo(‘#vegetables’);` |