Ej1 api migration in Angular Auto complete component
4 Apr 202313 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
<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 |
Filtering
| 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 |
Placeholder
| 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>
|
CSS
| 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. |
Grouping
| 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>
|
Localization
| 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>
|
Template
| 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>
|
Sorting
| 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>
|
Accessibility
| 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>
|
Selection
| 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>
|
|
|
Miscellaneous
| 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. |
Common
| 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](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>` |