Search results

Migration from Essential JS 1

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
<ej-autocomplete datasource="(IEnumerable<CarsList>)ViewBag.datasource"></ej-autocomplete>
Property: datasource
<ejs-autocomplete datasource="@ViewBag.data"></ejs-autocomplete>
Fields for mapping Property: e-autocomplete-fields
<ej-autocomplete id="autocomplete" ><e-autocomplete-fields text="Text" key="UniqueKey" /></ej-autocomplete>
Property: e-autocomplete-fields
<ejs-autocomplete id="country"><e-autocomplete-fields value="name" text="code"></e-autocomplete-fields></ejs-autocomplete>
Query Property: query
<ej-autocomplete id="autocomplete" query="ej.Query().from('Customers').take(10)"></ej-autocomplete>
Property: query
<ejs-autocomplete id="autocomplete" query="ej.Query().from('Customers').take(10)"></ejs-autocomplete>
Begin event Event: action-begin
<ej-autocomplete id="autocomplete" action-begin="onBegin"></ej-autocomplete>
Event: actionBegin
<ejs-autocomplete id="autocomplete" actionBegin="onBegin"></ejs-autocomplete>
Complete event Event: action-complete
<ej-autocomplete id="autocomplete" action-complete="onComplete"></ej-autocomplete>
Event: actionComplete
<ejs-autocomplete id="autocomplete" actionComplete="onComplete"></ejs-autocomplete>
Failure event Event: action-failure
<ej-autocomplete id="autocomplete" action-failure="onFailure"></ej-autocomplete>
Event: actionFailure
<ejs-autocomplete id="autocomplete" actionFailure="onFailure"></ejs-autocomplete>
Success event Event: action-sucess
<ej-autocomplete id="autocomplete" action-Success="onSuccess"></ej-autocomplete>
Not Applicable

Filtering

Behavior API in Essential JS 1 API in Essential JS 2
Case sensitivity Property: case-sensitive-search
<ej-autocomplete id="autocomplete" case-sensitive-search="true"></ej-autocomplete>
Property: ignoreCase
<ejs-autocomplete id="autocomplete" ignoreCase="true"></ejs-autocomplete>
Accent effective search Not applicable Property : ignoreAccent
ejs-autocomplete id="autocomplete" ignoreAccent="true"></ejs-autocomplete>
Filtering Type Property: filter-type
<ej-autocomplete id="autocomplete" filter-type=(FilterType.Contains)></ej-autocomplete>
Property: filterType
<ejs-autocomplete id="autocomplete" filterType="StartsWith"></ejs-autocomplete>
Autofill Property: enable-auto-fill
<ej-autocomplete id="autocomplete" enable-auto-fill="true"></ej-autocomplete>
Property:: autoFill
ejs-autocomplete id="autocomplete" autoFill="true"></ejs-autocomplete>
Highlight the search word Property: highlight-search <ej-autocomplete id="autocomplete" highlight-search="true"></ej-autocomplete> Property: highlight
ejs-autocomplete id="autocomplete" highlight="true"></ejs-autocomplete>
No of items to be shown Property: items-count
<ej-autocomplete id="autocomplete" items-count=2></ej-autocomplete>
Property: suggestionCount
<ejs-autocomplete id="autocomplete" suggestionCount="5"></ejs-autocomplete>
Minimum characters to enter Property: min-character
<ej-autocomplete id="autocomplete" min-character=2></ej-autocomplete>
Property: minLength
ejs-autocomplete id="autocomplete" minLength="3"></ejs-autocomplete>
Search Method: search
<ej-autocomplete id="autocomplete"></ej-autocomplete>

$("#autocomplete").ejAutocomplete("search");
Not applicable

Placeholder

Behavior API in Essential JS 1 API in Essential JS 2
Watermark text Property: watermark-text
<ej-autocomplete id="autocomplete" watermark-text="select"></ej-autocomplete>
Property: placeholder
ejs-autocomplete id="autocomplete" placeholder="select"></ejs-autocomplete>
Floating of waterMarkText Not applicable Property: floatLabelType
ejs-autocomplete id="autocomplete" floatLabelType="auto"></ejs-autocomplete>
Behavior API in Essential JS 1 API in Essential JS 2
No records text Property: empty-result-text
<ej-autocomplete id="autocomplete" empty-result-text="no records"></ej-autocomplete>
Property: noRecordsTemplate
<ejs-autocomplete id="autocomplete" noRecordsTemplate="@Html.Raw("<span class='norecord'> NO DATA AVAILABLE</span>")"></ejs-autocomplete>
No records showing Property: *show-empty-result-text
<ej-autocomplete id="autocomplete" show-empty-result-text="no records"></ej-autocomplete>
Not applicable
Popupbutton Property: show-popup-button
<ej-autocomplete id="autocomplete" show-popup-button="true"></ej-autocomplete>
Property: showPopupButton
<ej-autocomplete id="autocomplete" showPopupButton="true"></ej-autocomplete>
Clear button Property: show-reset-icon
<ej-autocomplete id="autocomplete" show-reset-icon="true"></ej-autocomplete>
Property: showClearButton
<ej-autocomplete id="autocomplete" show-clear-button="true"></ej-autocomplete>
Animation Property: animate-type
<ej-autocomplete id="autocomplete" animate-type=AnimateType.none></ej-autocomplete>
Not Applicable
Focusing the list item Property: auto-focus
<ej-autocomplete id="autocomplete" auto-focus="true"></ej-autocomplete>
Not applicable
Delaying the popup open time Property: delay-suggestion-timeout
<ej-autocomplete id="autocomplete" delay-suggestion-timeout=500></ej-autocomplete>
Not applicable
Popup text when there is no popup items Property: empty-result-text
<ej-autocomplete id="autocomplete" empty-result-text="no records"></ej-autocomplete>
https://ej2.syncfusion.com/aspnetcore/AutoComplete/Template#/material
Enable/disable the duplicate option Property: enable-distinct
<ej-autocomplete id="autocomplete" enable-distinct="true"></ej-autocomplete>
Not applicable
Popup height Property: popup-height
<ej-autocomplete id="autocomplete" popup-height="300px"></ej-autocomplete>
Property: popupHeight
<ejs-autocomplete id="autocomplete" popupHeight="300px"></ejs-autocomplete>
Popup Width Property: popup-width
<ej-autocomplete id="autocomplete" popup-width="300px"></ej-autocomplete>
Property: popupWidth
<ej-autocomplete id="autocomplete" popupWidth="300px"></ej-autocomplete>
Open popup Method: open
<ej-autocomplete id="autocomplete"></ej-autocomplete>

$("#autocomplete").ejAutocomplete("open");
Method: showPopup
<ej-autocomplete id="autocomplete"></ej-autocomplete>

$("#autocomplete").ejAutocomplete("open");
Close event Event: close
<ej-autocomplete id="autocomplete" close="onClose"></ej-autocomplete>
Event: close
<ej-autocomplete id="autocomplete" close="onClose"></ej-autocomplete>
Open event Event: open
<ej-autocomplete id="autocomplete" open="onOpen"></ej-autocomplete>
Event: open
<ej-autocomplete id="autocomplete" open="onOpen"></ej-autocomplete>

CSS

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: css-class
<ej-autocomplete id="autocomplete" css-class="customclass"></ej-autocomplete>
Property: cssClass
<ej-autocomplete id="autocomplete" cssClass="customClass"></ej-autocomplete>
Height Property: height
<ej-autocomplete id="autocomplete" height="300px"></ej-autocomplete>
By using css-class property, you can acheive this.
showRoundedCorner Property: show-rounded-corner
<ej-autocomplete id="autocomplete" show-rounded-corner="true"></ej-autocomplete>
By using css-class property, you can acheive this.
Width Property: width
<ej-autocomplete id="autocomplete" width="300px"></ej-autocomplete>
Property: width
<ej-autocomplete id="autocomplete" width="300px"></ej-autocomplete>
Visibility Property: visible
<ej-autocomplete id="autocomplete" visisble="true"></ej-autocomplete>
By using css-class property, you can acheive this.

Grouping

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: fields.groupBy
<ej-autocomplete id="autocomplete"><e-autocomplete-fields group-by="Text" /></ej-autocomplete>
Property: fields.groupBy <ejs-autocomplete id="country"><e-autocomplete-fields groupBy="name"></e-autocomplete-fields></ejs-autocomplete>

Localization

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: locale
<ej-autocomplete id="autocomplete" locale="fr-FE"></ej-autocomplete>
Property: locale
<ejs-autocomplete id="country" locale="fr-FE"></ejs-autocomplete>

Template

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: template <ej-autocomplete id="autocomplete" template="@Html.Raw("<span><span class='name'>${FirstName}</span><span class ='city'>${City}</span></span>")">></ej-autocomplete> Property: itemTemplate
<ejs-autocomplete id="employees" itemTemplate="@Html.Raw("<span><span class='name'>${FirstName}</span><span class ='city'>${City}</span></span>")">></ejs-autocomplete>
Group Template Not Applicable Property: groupTemplate
<ejs-autocomplete id="employees" groupTemplate="@Html.Raw("<strong>${City}</strong>")"></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="@Html.Raw("<span class='head'><span class='name'>Name</span><span class='city'>City</span></span>")"></ejs-autocomplete>
FooterTemplate Not applicable Property: footerTemplate
<ejs-autocomplete id="employees" footerTemplate="@Html.Raw( "<span class='foot'> Total list items: " + 7 + "</span>")"></ejs-autocomplete>
No records Template Not applicable Property: noRecordsTemplate
<ejs-autocomplete id="employees" noRecordsTemplate="@Html.Raw("<span class='norecord'> NO DATA AVAILABLE</span>")"></ejs-autocomplete>
Action failure Template Not applicable Property: actionFailureTemplate
<ejs-autocomplete id="employees" actionFailureTemplate="@Html.Raw("<div class=\"header\"> <span>Photo</span> <span class=\"info\">Employee Info</span></div>)")"></ejs-autocomplete>

Sorting

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: allow-sorting
<ej-autocomplete id="autocomplete" allow-sorting="true"></ej-autocomplete>
It is applicable when the sortOrder is defined.
Order of sorting Property: sort-order
<ej-autocomplete id="autocomplete" sort-order="Ascending"></ej-autocomplete>
Property: sortOrder
<ejs-autocomplete id="country" sortOrder="Ascending"></ejs-autocomplete>

Accessibility

Behavior API in Essential JS 1 API in Essential JS 2
RTL support Property: enable-rtl
<ej-autocomplete id="autocomplete" enable-rtl="true"></ej-autocomplete>
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: select-value-by-key
<ej-autocomplete id="autocomplete" selectValueByKey="13"></ej-autocomplete>
Achievable through value property
Selecting particular value Property: value
<ej-autocomplete id="autocomplete" value="data"></ej-autocomplete>
Property: value
<ejs-autocomplete id="country" value="data"></ejs-autocomplete>
Selecting particular text Property: text
<ej-autocomplete id="autocomplete" text="data"></ej-autocomplete>
By using text property, you can acheive this.
Selecting particular value Method: selectValueByKey
<ej-autocomplete id="autocomplete" ></ej-autocomplete>

$("#autocomplete").selectValueByKey("key")
Achievable through value property
Selecting particular text Method: selectValueByText
<ej-autocomplete id="autocomplete" ></ej-autocomplete>

$("#autocomplete").selectValueByText("key")
Achievable through text property
Select event Event: select
<ej-autocomplete id="autocomplete" select="onSelect"></ej-autocomplete>
Event: select
<ejs-autocomplete id="country" sortOrder="auto"></ejs-autocomplete>

Miscellaneous

Behavior API in Essential JS 1 API in Essential JS 2
Enable/disable Property: enabled
<ej-autocomplete id="autocomplete" enabled="true"></ej-autocomplete>
Property: enabled
<ejs-autocomplete id="country" enabled="true"></ejs-autocomplete>
Enable persistence Property: enable-persistence
<ej-autocomplete id="autocomplete" enable-persistence="true"></ej-autocomplete>
Property: enablePersistence
<ejs-autocomplete id="country" enablePersistence="true"></ejs-autocomplete>
Loading icon Property: show-loading-icon
<ej-autocomplete id="autocomplete" show-loading-icon="true"></ej-autocomplete>
By default,it is showing
Read only Property: read-only
<ej-autocomplete id="autocomplete" read-only="true"></ej-autocomplete>
Property: readOnly <ej-autocomplete id="autocomplete" r="true"></ej-autocomplete>
Disable Method: disable
<ej-autocomplete id="autocomplete" read-only="true"></ej-autocomplete>

$("#autocomplete").ejAutoComplete("disable");
Enabled property can be used here

Common

Behavior API in Essential JS 1 API in Essential JS 2
Addition of new option watermarktext Property: add-new-text
<ej-autocomplete id="autocomplete" add-new-text="data"></ej-autocomplete>
Not applicable
Addition of new item Property: allow-add-new
<ej-autocomplete id="autocomplete" allow-add-new="true"></ej-autocomplete>
Property: allowCustom
<ej-autocomplete id="autocomplete" allowCustom="true"></ej-autocomplete>
Reset the autocomplete Property: show-reset-icon
<ej-autocomplete id="autocomplete" show-reset-icon="true"></ej-autocomplete>
Property: showClearIcon <ejs-autocomplete id="country" showClearIcon="true"></ejs-autocomplete>
Destroy Method: destroy
<ej-autocomplete id="autocomplete" ></ej-autocomplete>

$("#autocomplete").ejAutoComplete("destroy");
Method: destroy
<ejs-autocomplete id="country"></ejs-autocomplete>

var autoObj = document.getElementById("country").ej2_Instances[0];

autoObj.destroy();
Reset the autocomplete Method: clearText
<ej-autocomplete id="autocomplete" ></ej-autocomplete>

$("#autocomplete").ejAutoComplete("clearText");
By passing empty value to the value property, you can acheive this
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
<ej-autocomplete id="autocomplete" ></ej-autocomplete>

$("#autocomplete").ejAutoComplete("hide");
By using css-class property, you can acheive this.
Getting particular text Method: getActiveText
<ej-autocomplete id="autocomplete" ></ej-autocomplete>

$("#autocomplete").ejAutoComplete("getActiveText");
By using text property, you can get it.
Getting particular value Method: getValue
<ej-autocomplete id="autocomplete" ></ej-autocomplete>

$("#autocomplete").ejAutoComplete("getValue");
** By using value property, you can get it.**
Change event Event: change
<ej-autocomplete id="autocomplete" change="onChange"></ej-autocomplete>
Event: change
<ejs-autocomplete id="country" change="onChange"></ejs-autocomplete>
Create event Event: create
<ej-autocomplete id="autocomplete" change="onChange"></ej-autocomplete>
Event: created
<ejs-autocomplete id="country" created="onCreated"></ejs-autocomplete>
Destroy event Event: destroy
<ej-autocomplete id="autocomplete" destroy="onDestroy"></ej-autocomplete>
Event: destroyed
<ejs-autocomplete id="country" destroyed="onDestroy"></ejs-autocomplete>
Focus out event Event: focus-out
<ej-autocomplete id="autocomplete" focus-out="onfocusout"></ej-autocomplete>
Event: blur
<ejs-autocomplete id="country" blur="onChange"></ejs-autocomplete>
Focus in event Event : focus-in
<ej-autocomplete id="autocomplete" focus-in="onfocus"></ej-autocomplete>
Event: focus
<ejs-autocomplete id="country" focus="onFocus"></ejs-autocomplete>