Ej1 api migration in Angular Auto complete component 4 Apr 2023
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.
Expand Table
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
Expand Table
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
Expand Table
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>
Expand Table
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>
Expand Table
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.
Expand Table
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>
Expand Table
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>
Expand Table
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>
Expand Table
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>
Expand Table
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>
Expand Table
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.
Property : value <input type="text" id="databindinglocal" ej-autocomplete [value]="value" />
Property: value <ejs-autocomplete id="country" [value]="data"></ejs-autocomplete>
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>
Expand Table
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; |**Acheivable through the [value](https://ej2.syncfusion.com/angular/documentation/api/auto-complete/#value) property.** |
| **Change event** | **Event:** *change*<br/><input type=”text” id=”databindinglocal” ej-autocomplete (change)=”change($event)” />|**Event:** *change* <br/><ejs-autocomplete id=”country” (change)=”onChange($event)”></ejs-autocomplete>|
| **Create event** | **Event:** *create* <br/><input type=”text” id=”databindinglocal” ej-autocomplete (create)=”create($event)” />|**Event:** *created* <br/><ejs-autocomplete id=”country” (created)=”onCreated($event)”></ejs-autocomplete>|
| **Destroy event** | **Event:** *destroy* <br/><input type=”text” id=”databindinglocal” ej-autocomplete (destroy)=”destroy($event)” /> |**Event:** *destroyed* <br/><ejs-autocomplete id=”country” (destroyed)=”onDestroy($event)”></ejs-autocomplete>|
| **Focus out event** | **Event**: *focusOut*<br/><input type=”text” id=”databindinglocal” ej-autocomplete (focusOut)=”focusOut($event)” />| **Event:** *blur* <br/><ejs-autocomplete id=”country” (blur)=”onChange($event)”></ejs-autocomplete> |
| **Focus in event** | **Event** : *focusIn*<br/><input type=”text” id=”databindinglocal” ej-autocomplete (focusIn)=”focusIn($event)” /> | **Event:** *focus* <br/><ejs-autocomplete id=”country” (focus)=”onFocus($event)”></ejs-autocomplete>` |