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 <input type="text" id="databindinglocal" ej-autocomplete [dataSource]="states" /> |
Property: datasource<ejs-autocomplete [datasource]="data"></ejs-autocomplete> |
| Fields for mapping | Property: fields<input type="text" id="databindinglocal" ej-autocomplete [fields]="fields" /> |
Property: fields<ejs-autocomplete id="country" [fields]="fields"></ejs-autocomplete> |
| Query | Property: query<input type="text" id="databindinglocal" ej-autocomplete [query]="query"/> |
Property: query<ejs-autocomplete id="autocomplete" [query]="ej.Query().from('Customers').take(10)"></ejs-autocomplete> |
| Begin event | Event: actionBegin<input type="text" id="databindinglocal" ej-autocomplete (actionBegin)="actionBegin($event)"/> |
Event: actionBegin<ejs-autocomplete id="autocomplete" (actionBegin)="onBegin($event)"></ejs-autocomplete> |
| Complete event | Event: actionComplete<input type="text" id="databindinglocal" ej-autocomplete (actionComplete)="actionComplete($event)"/> |
Event: actionComplete <ejs-autocomplete id="autocomplete" (actionComplete)="onComplete($event)"></ejs-autocomplete> |
| Failure event | Event: actionFailure<input type="text" id="databindinglocal" ej-autocomplete (actionFailure)="actionFailure($event)"/> |
Event: actionFailure <ejs-autocomplete id="autocomplete" (actionFailure)="onFailure($event)"></ejs-autocomplete> |
| Success event | Event: actionSuccess <input type="text" id="databindinglocal" ej-autocomplete (actionSuccess)="actionSuccess($event)"/> |
Not Applicable |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Case sensitivity | Property: caseSensitiveSearch<input type="text" id="databindinglocal" ej-autocomplete [caseSensitiveSearch]="true" /> |
Property: ignoreCase<ejs-autocomplete id="autocomplete" [ignoreCase]="ignoreCase"></ejs-autocomplete> |
| Accent effective search | Not applicable | Property : ignoreAccent ejs-autocomplete id="autocomplete" [ignoreAccent]="ignoreAccent"></ejs-autocomplete> |
| Filtering Type | Property: filterType<input type="text" id="databindinglocal" ej-autocomplete [filterType]="filterType" /> |
Property: filterType<ejs-autocomplete id="autocomplete" [filterType]="filterType"></ejs-autocomplete> |
| Autofill | Property: enableAutoFill<input type="text" id="databindinglocal" ej-autocomplete [enableAutoFill]="enableAutoFill" /> |
Property: autoFill ejs-autocomplete id="autocomplete" [autoFill]="autoFill"></ejs-autocomplete> |
| Highlight the search word | Property: highlightSearch <input type="text" id="databindinglocal" ej-autocomplete [highlightSearch]="highlightSearch" /> |
Property: highlight ejs-autocomplete id="autocomplete" [highlight]="highlight"></ejs-autocomplete> |
| No of items to be shown | Property: itemsCount<input type="text" id="databindinglocal" ej-autocomplete [itemsCount]="itemsCount" /> |
Property: suggestionCount<ejs-autocomplete id="autocomplete" [suggestionCount]="suggestionCount"></ejs-autocomplete> |
| Minimum characters to enter | Property: minCharacter<input type="text" id="databindinglocal" ej-autocomplete [minCharacter]="minCharacter" /> |
Property: minLength ejs-autocomplete id="autocomplete" [minLength]="minLength"></ejs-autocomplete> |
| Search | Method: search <input type="text" id="databindinglocal" ej-autocomplete />$("#autocomplete").ejAutoComplete("search"); |
Not applicable |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Watermark text | Property: watermarkText <input type="text" id="databindinglocal" ej-autocomplete [watermarkText]="select" /> |
Property: placeholder ejs-autocomplete id="autocomplete" [placeholder]="select"></ejs-autocomplete> |
| Floating of watermark text | Not applicable | Property: floatLabelType ejs-autocomplete id="autocomplete" [floatLabelType]="floatLabelType"></ejs-autocomplete> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| No records showing | Property: showEmptyResultText <input type="text" id="databindinglocal" ej-autocomplete [showEmptyResultText]="true" /> |
Not applicable |
| Popupbutton | Property: showPopupButton<input type="text" id="databindinglocal" ej-autocomplete [showPopupButton]="true" /> |
Property: showPopupButton<ejs-autocomplete id="autocomplete" [showPopupButton]="true"></ejs-autocomplete> |
| Clear button | Property: showResetIcon <input type="text" id="databindinglocal" ej-autocomplete [showResetIcon]="true" /> |
Property: showClearButton <ejs-autocomplete id="autocomplete" [showClearButton]="true"></ejs-autocomplete> |
| Animation | Property: animateType <input type="text" id="databindinglocal" ej-autocomplete [animateType]="animateType" /> |
Not Applicable |
| Focusing the list item | Property: autoFocus<input type="text" id="databindinglocal" ej-autocomplete [autoFocus]="true" /> |
Not applicable |
| Delaying the popup open time | Property: delaySuggestionTimeout<input type="text" id="databindinglocal" ej-autocomplete [delaySuggestionTimeout]="delaySuggestionTimeout" /> |
Not applicable |
| Popup text when there is no popup items | Property: emptyResultText<input type="text" id="databindinglocal" ej-autocomplete [emptyResultText]="no records" /> |
https://ej2.syncfusion.com/angular/demos/#/material/auto-complete/template |
| Enable/disable the duplicate option | Property: enableDistinct<input type="text" id="databindinglocal" ej-autocomplete [enableDistinct]="true" /> |
Not applicable |
| Popup height | Property: popupHeight<input type="text" id="databindinglocal" ej-autocomplete [popupHeight]="popupHeight" /> |
Property: popupHeight <ejs-autocomplete id="autocomplete" [popupHeight]="300px"></ejs-autocomplete> |
| Popup Width | Property: popupWidth<input type="text" id="databindinglocal" ej-autocomplete [popupWidth]="popupWidth" /> |
Property: popupWidth <ej-autocomplete id="autocomplete" [popupWidth]="300px"></ej-autocomplete> |
| Open popup | Method: open<input type="text" id="databindinglocal" ej-autocomplete />$("#autocomplete").ejAutoComplete("open"); |
Method: showPopup<ej-autocomplete id="autocomplete"></ej-autocomplete>@ViewChild('sample') public obj: AutoCompleteComponent;obj.open(); |
| Close event | Event: close<input type="text" id="databindinglocal" ej-autocomplete (close)="close($event)" /> |
Event: close <ej-autocomplete id="autocomplete" (close)="onClose($event)"></ej-autocomplete> |
| Open event | Event: open<input type="text" id="databindinglocal" ej-autocomplete (open)="open($event)" /> |
Event: open <ej-autocomplete id="autocomplete" (open)="onOpen($event)"></ej-autocomplete> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: cssClass <input type="text" id="databindinglocal" ej-autocomplete [cssClass]="cssClass" /> |
Property: cssClass <ej-autocomplete id="autocomplete" [cssClass]="customClass"></ej-autocomplete> |
| Height | Property: height <input type="text" id="databindinglocal" ej-autocomplete [height]="height" /> |
Acheivable through the cssClass property. |
| showRoundedCorner | Property: showRoundedCorner <input type="text" id="databindinglocal" ej-autocomplete [showRoundedCorner]="showRoundedCorner" /> |
Acheivable through the cssClass property. |
| Width | Property: width <input type="text" id="databindinglocal" ej-autocomplete [width]="width" /> |
Property: width <ej-autocomplete id="autocomplete" [width]="300px"></ej-autocomplete> |
| Visibility | Property: visible <input type="text" id="databindinglocal" ej-autocomplete [visible]="true" /> |
Acheivable through the cssClass property. |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: fields<input type="text" id="databindinglocal" ej-autocomplete [fields]="fields" /> |
Property: fields <ejs-autocomplete id="country" [fields]="fields"></ejs-autocomplete> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: locale <input type="text" id="databindinglocal" ej-autocomplete [locale]="fr-FE" /> |
Property: locale <ejs-autocomplete id="country" [locale]="locale"></ejs-autocomplete> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: template <input type="text" id="databindinglocal" ej-autocomplete [template]="template" /> |
Property: itemTemplate<ejs-autocomplete id="employees" [itemTemplate]="itemTemplate">></ejs-autocomplete> |
| Group Template | Not Applicable | Property: groupTemplate <ejs-autocomplete id="employees" [groupTemplate]="groupTemplate"></ejs-autocomplete> |
| ValueTemplate | Not applicable | Property: valueTemplate <ejs-autocomplete id="employees" valueTemplate="data"></ejs-autocomplete> |
| Header Template | Not applicable | Property: headerTemplate <ejs-autocomplete id="employees" [headerTemplate]="headerTemplate"></ejs-autocomplete> |
| FooterTemplate | Not applicable | Property: footerTemplate <ejs-autocomplete id="employees" [footerTemplate]="footerTemplate"></ejs-autocomplete> |
| No records Template | Not applicable | Property: noRecordsTemplate <ejs-autocomplete id="employees" [noRecordsTemplate]="noRecordsTemplate"></ejs-autocomplete> |
| Action failure Template | Not applicable | Property: actionFailureTemplate <ejs-autocomplete id="employees" [actionFailureTemplate]="actionFailureTemplate"></ejs-autocomplete> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: allowSorting <input type="text" id="databindinglocal" ej-autocomplete [allowSorting]="true" /> |
Acheivable through the sortOrder property. |
| Order of sorting | Property: sortOrder <input type="text" id="databindinglocal" ej-autocomplete [sortOrder]="sortOrder" /> |
Property: sortOrder<ejs-autocomplete id="country" [sortOrder]="sortOrder"></ejs-autocomplete> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| RTL support | Property: enableRtl <input type="text" id="databindinglocal" ej-autocomplete [enableRtl]="true" /> |
Property: enableRtl <ejs-autocomplete id="country" [enableRtl]="true"></ejs-autocomplete> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Selecting particular value | Property: selectValueByKey <input type="text" id="databindinglocal" ej-autocomplete [selectValueByKey]="selectValueByKey" /> |
Acheivable through the value property. |
| Selecting particular text | Property: text<input type="text" id="databindinglocal" ej-autocomplete [text]="text" /> |
Not applicable |
| Selecting particular value | Method: selectValueByKey<input type="text" id="databindinglocal" ej-autocomplete />@ViewChild('sample') public obj: AutoCompleteComponent;obj.selectValueByKey("key") |
Acheivable through the value property. |
| Selecting particular text | Method: selectValueByText <input type="text" id="databindinglocal" ej-autocomplete />@ViewChild('sample') public obj: AutoCompleteComponent;obj.selectValueByText("key") |
Not applicable |
| Select event | Event: select<input type="text" id="databindinglocal" ej-autocomplete (select)="select($event)" /> |
Event: select <ejs-autocomplete id="country" (select)="select($event)"></ejs-autocomplete> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enable/disable | Property: enabled<input type="text" id="databindinglocal" ej-autocomplete [enabled]="true" /> |
Property: enabled <ejs-autocomplete id="country" [enabled]="true"></ejs-autocomplete> |
| Enable persistence | Property: enablePersistence<input type="text" id="databindinglocal" ej-autocomplete [enablePersistence]="true" /> |
Property: enablePersistence <ejs-autocomplete id="country" [enablePersistence]="true"></ejs-autocomplete> |
| Loading icon | Property: showLoadingIcon <input type="text" id="databindinglocal" ej-autocomplete [showLoadingIcon]="true" /> |
By default,it is showing |
| Read only | Property: readOnly <input type="text" id="databindinglocal" ej-autocomplete [readOnly]="true" /> |
Property: readOnly <ej-autocomplete id="autocomplete" [readOnly]="true"></ej-autocomplete> |
| Disable | Method: disable<input type="text" id="databindinglocal" ej-autocomplete />@ViewChild('sample') public obj: AutoCompleteComponent;obj.disable(); |
Acheivable through the enabled property. |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Addition of new option watermark text | Property: addNewText <input type="text" id="databindinglocal" ej-autocomplete [addNewText]="addNewText" /> |
Not applicable |
| Addition of new item | Property: allowAddNew <input type="text" id="databindinglocal" ej-autocomplete [allowAddNew]="allowAddNew" /> |
Property: allowCustom<ej-autocomplete id="autocomplete" [allowCustom]="true"></ej-autocomplete> |
| Reset the autocomplete | Property: showResetIcon <input type="text" id="databindinglocal" ej-autocomplete [showResetIcon]="showResetIcon" /> |
Property: showClearIcon <ejs-autocomplete id="country" [showClearIcon]="true"></ejs-autocomplete> |
| Destroy | Method: destroy<input type="text" id="autocomplete" ej-autocomplete />$("#autocomplete").ejAutoComplete("destroy"); |
Method: destroy <ejs-autocomplete id="country"></ejs-autocomplete>@ViewChild('sample') public autoObj: AutoCompleteComponent;autoObj.destroy(); |
| Reset the autocomplete | Method: clearText<input type="text" id="databindinglocal" ej-autocomplete />@ViewChild('sample') public obj: AutoCompleteComponent;obj.clearText(); |
<ej-autocomplete id="autocomplete" [value]=""></ej-autocomplete> |
| Multicolumn | Property: multiColumnSettings<ej-autocomplete id="autocomplete" datasource="ViewBag.datasource"><e-multicolumnsettings enable="true" show-header="true" string-format="{0} ({1})" search-column-indices="@val.SearchColumnIndices"><e-multi-columns><e-multi-column field="UniqueKey" header-text="Unique Key"></e-multi-column><e-multi-column field="Text" header-text="Text"></e-multi-column></e-multi-columns></e-multicolumnsettings></ej-autocomplete> |
Not applicable |
| Hide the Autocomplete | Method: hide<input type="text" id="databindinglocal" ej-autocomplete />@ViewChild('sample') public obj: AutoCompleteComponent;obj.hide(); |
Acheivable through the cssClass property. |
| Getting particular text | Method: getActiveText <input type="text" id="databindinglocal" ej-autocomplete />@ViewChild('sample') public obj: AutoCompleteComponent;obj.getActiveText(); |
Not applicable |
| Getting particular value | Method: getValue<input type="text" id="databindinglocal" ej-autocomplete />@ViewChild('sample') public obj: AutoCompleteComponent;obj.getValue();` |Acheivable through the value property. |
|
| Change event | Event: change<input type="text" id="databindinglocal" ej-autocomplete (change)="change($event)" /> |
Event: change <ejs-autocomplete id="country" (change)="onChange($event)"></ejs-autocomplete> |
| Create event | Event: create <input type="text" id="databindinglocal" ej-autocomplete (create)="create($event)" /> |
Event: created <ejs-autocomplete id="country" (created)="onCreated($event)"></ejs-autocomplete> |
| Destroy event | Event: destroy <input type="text" id="databindinglocal" ej-autocomplete (destroy)="destroy($event)" /> |
Event: destroyed <ejs-autocomplete id="country" (destroyed)="onDestroy($event)"></ejs-autocomplete> |
| Focus out event | Event: focusOut<input type="text" id="databindinglocal" ej-autocomplete (focusOut)="focusOut($event)" /> |
Event: blur <ejs-autocomplete id="country" (blur)="onChange($event)"></ejs-autocomplete> |
| Focus in event | Event : focusIn<input type="text" id="databindinglocal" ej-autocomplete (focusIn)="focusIn($event)" /> |
Event: focus <ejs-autocomplete id="country" (focus)="onFocus($event)"></ejs-autocomplete> |