Search results

Migration from Essential JS 1 in Angular AutoComplete component

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.
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 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>