Migration from Essential JS 1
19 Dec 202214 minutes to read
This article describes the API migration process of AutoComplete component from Essential JS 1 to Essential JS 2.
N> 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 @Html.EJ().Autocomplete("autocomplete").Datasource((IEnumerable<CarsList>)ViewBag.datasource)
|
Property: DataSource@Html.EJS().AutoComplete("games").DataSource((IEnumerable<object>)ViewBag.localdata).Render()
|
| Fields for mapping |
Property: AutocompleteFields@Html.EJ().Autocomplete("autocomplete").AutocompleteFields(field => field.Key("UniqueKey").Text("Text"))
|
Property: e-autocomplete-fields@Html.EJS().AutoComplete("games").Fields(new AutoCompleteFieldSettings { Text = "Game" }).Render()
|
| Query |
Property: Query@Html.EJ().Autocomplete("selectCar").Query("ej.Query().from('Customers').take(10)")
|
Property: Query@Html.EJS().AutoComplete("customers").Query((string)ViewBag.query).Render()
|
| Begin event |
Event: ActionBegin@Html.EJ().Autocomplete("selectCar").ActionBegin("onBegin")
|
Event: ActionBegin@Html.EJS().AutoComplete("customers").ActionBegin("onBegin").Render()
|
| Complete event |
Event: ActionComplete@Html.EJ().Autocomplete("selectCar").ActionComplete("onComplete")
|
Event: ActionComplete @Html.EJS().Autocomplete("selectCar").ActionComplete("onComplete").Render()
|
| Failure event |
Event: ActionFailure@Html.EJ().Autocomplete("selectCar").ActionFailure("onFailure")
|
Event: ActionFailure @Html.EJS().Autocomplete("selectCar").ActionFailure("onFailure").Render()
|
| Success event |
Event: ActionSuccess @Html.EJ().Autocomplete("selectCar").ActionSuccess("onSuccess")
|
NotApplicable |
Filtering
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Case sensitivity |
Property: CaseSensitiveSearch@Html.EJ().Autocomplete("selectCar").CaseSensitiveSearch(true)
|
Property: ignoreCase@Html.EJS().Autocomplete("selectCar").IgnoreCase(true).Render()
|
| Accent effective search | Not applicable |
Property : ignoreAccent @Html.EJS().Autocomplete("selectCar").IgnoreAccent(true).Render()
|
| Filtering Type |
Property: FilterType@Html.EJ().Autocomplete("selectCar").FilterType(SortOrder.None)
|
Property: FilterType@Html.EJS().Autocomplete("selectCar").FilterType(FilterType.Contains).Render()
|
| Autofill |
Property: EnableAutoFill@Html.EJ().Autocomplete("selectCar").EnableAutoFill(true)
|
Property:: AutoFill @Html.EJS().Autocomplete("selectCar").AutoFill(true).Render()
|
| Highlight the search word |
Property: HighlightSearch @Html.EJ().Autocomplete("selectCar").HighlightSearch(true)
|
Property: Highlight @Html.EJS().Autocomplete("selectCar").Highlight(true).Render()
|
| No of items to be shown |
Property: ItemsCount@Html.EJ().Autocomplete("selectCar").ItemsCount(3)
|
Property: SuggestionCount@Html.EJS().Autocomplete("selectCar").SuggestionCount(3).Render()
|
| Minimum characters to enter |
Property: MinCharacter@Html.EJ().Autocomplete("selectCar").MinCharacter(3)
|
Property: MinLength @Html.EJ()S.Autocomplete("selectCar").MinLength(3).Render()
|
| Search |
Method: search @Html.EJ().Autocomplete("selectCar")$("#selectCar").ejAutocomplete("search");
|
Not applicable |
Placeholder
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Watermark text |
Property: WatermarkText @Html.EJ().Autocomplete("selectCar").WatermarkText("Select")
|
Property: Placeholder @Html.EJS().Autocomplete("selectCar").Placeholder("select").Render()
|
| Floating of waterMarkText | Not applicable |
Property: FloatLabelType @Html.EJS().Autocomplete("selectCar").FloatLabelType("Auto").Render()
|
Popup
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| No records text |
Property: EmptyResultText @Html.EJ().Autocomplete("selectCar").EmptyResultText("no records")
|
Property: NoRecordsTemplate@Html.EJS().Autocomplete("selectCar").NoRecordsTemplate("@Html.Raw("<span class='norecord'> NO DATA AVAILABLE</span>")").Render()
|
| No records showing |
Property: *show-empty-result-text@Html.EJ().Autocomplete("selectCar").ShowEmptyResultText("no records")
|
Not applicable |
| Popupbutton |
Property: ShowPopupButton@Html.EJ().Autocomplete("selectCar").ShowPopupButton(true)
|
Property: ShowPopupButton@Html.EJS().Autocomplete("selectCar").ShowPopupButton(true).Render()
|
| Clear button |
Property: ShowResetIcon @Html.EJ().Autocomplete("selectCar").ShowResetIcon(true)
|
Property: ShowClearButton @Html.EJS().Autocomplete("selectCar").ShowClearButton(true).Render()
|
| Animation |
Property: animate-type @Html.EJ().Autocomplete("selectCar").AnimateType("None")
|
Not Applicable |
| Focusing the list item |
Property: AutoFocus@Html.EJ().Autocomplete("selectCar").AutoFocus("true")
|
Not applicable |
| Delaying the popup open time |
Property: delay-suggestion-timeout@Html.EJ().Autocomplete("selectCar").DelaySuggestionTimeout(500)
|
Not applicable |
| Popup text when there is no popup items |
Property: empty-result-text@Html.EJ().Autocomplete("selectCar").EmptyResultText("no records")
|
https://ej2.syncfusion.com/aspnetmvc/AutoComplete/Template#/material |
| Enable/disable the duplicate option |
Property: enable-distinct@Html.EJ().Autocomplete("selectCar").EnableDistinct(true)
|
Not applicable |
| Popup height |
Property: PopupHeight@Html.EJ().Autocomplete("selectCar").PopupHeight("300px")
|
Property: PopupHeight @Html.EJ().Autocomplete("selectCar").PopupHeight("300px").Render()
|
| Popup Width |
Property: PopupWidth@Html.EJ().Autocomplete("selectCar").PopupWidth("300px")
|
Property: PopupWidth @Html.EJ().Autocomplete("selectCar").PopupWidth("300px").Render()
|
| Open popup |
Method: open@Html.EJ().Autocomplete("autocomplete")$("#autocomplete").ejAutocomplete("open");
|
Method: showPopup@Html.EJS().Autocomplete("autocomplete").Render()$("#autocomplete").ejAutocomplete("showPopup");
|
| Close event |
Event: Close@Html.EJ().Autocomplete("autocomplete").close("onClose")
|
Event: Close @Html.EJS().Autocomplete("autocomplete").Close("close").Render()
|
| Open event |
Event: Open@Html.EJ().Autocomplete("autocomplete").open("onOpen')
|
Event: Open @Html.EJS().Autocomplete("autocomplete").Open(open).Render()
|
CSS
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default |
Property: Cssclass @Html.EJ().Autocomplete("autocomplete").CssClass("CSSClass")
|
Property: cssClass @Html.EJS().Autocomplete("autocomplete").CssClass("class").Render()
|
| Height |
Property: Height @Html.EJ().Autocomplete("autocomplete").Height("300px")
|
By using css-class property, you can acheive this. |
| showRoundedCorner |
Property: ShowRoundedCorner@Html.EJ().Autocomplete("autocomplete").ShowRoundedCorner(true)
|
By using css-class property, you can acheive this. |
| Width |
Property: width @Html.EJ().Autocomplete("autocomplete").Width("200px")
|
Property: width @Html.EJS().Autocomplete("autocomplete").Width("300px").Render()
|
| Visibility |
Property: visible @Html.EJ().Autocomplete("autocomplete").Visible(true)
|
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@Html.EJ().Autocomplete("autocomplete").AutocompleteFields(field => field.GroupBy("UniqueKey"))
|
Property: fields.groupBy @Html.EJS().AutoComplete("games").Fields(new AutoCompleteFieldSettings { GroupBy = "Game" }).Render()
|
Localization
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default |
Property: Locale @Html.EJ().Autocomplete("autocomplete").Locale("fr-FE")
|
Property: Locale @Html.EJS().AutoComplete("games").Locale("fr-FE").Render()
|
Template
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default |
Property: Template @Html.EJ().Autocomplete("autocomplete").Template("@Html.Raw("<span><span class='name'>${FirstName}</span><span class ='city'>${City}</span></span>")")
|
Property: ItemTemplate@Html.EJS().Autocomplete("autocomplete").ItemTemplate("@Html.Raw("<span><span class='name'>${FirstName}</span><span class ='city'>${City}</span></span>")")
|
| Group Template | Not Applicable |
Property: GroupTemplate @Html.EJS().Autocomplete("autocomplete").GroupTemplate("@Html.Raw("<strong>${City}</strong>")")
|
| ValueTemplate | Not applicable |
Property: ValueTemplate @Html.EJS().Autocomplete("autocomplete").ValueTemplate("data")
|
| Header Template | Not applicable |
Property: HeaderTemplate @Html.EJS().Autocomplete("autocomplete").HeaderTemplate("@Html.Raw("<span class='head'><span class='name'>Name</span><span class='city'>City</span></span>")")
|
| FooterTemplate | Not applicable |
Property: FooterTemplate @Html.EJS().Autocomplete("autocomplete").FooterTemplate("@Html.Raw( "<span class='foot'> Total list items: " + 7 + "</span>")")
|
| No records Template | Not applicable |
Property: NoRecordsTemplate @Html.EJS().Autocomplete("autocomplete").NoRecordsTemplate("@Html.Raw("<span class='norecord'> NO DATA AVAILABLE</span>")")
|
| Action failure Template | Not applicable |
Property: ActionFailureTemplate @Html.EJS().Autocomplete("autocomplete").ActionFailureTemplate("@Html.Raw("<div class=\"header\"> <span>Photo</span> <span class=\"info\">Employee Info</span></div>)")")
|
Sorting
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default |
Property: AllowSorting @Html.EJ().Autocomplete("autocomplete").AllowSorting(true)
|
It is applicable when the sortOrder is defined. |
| Order of sorting |
Property: SortOrder @Html.EJS().Autocomplete("autocomplete").SortOrder("Ascending")
|
Property: SortOrder@Html.EJS().AutoComplete("games").SortOrder("Ascending").Render()
|
Accessibility
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| RTL support |
Property: EnableRtl @Html.EJ().Autocomplete("autocomplete").EnableRtl(true)
|
Property: EnableRtl @Html.EJS().AutoComplete("games").EnableRtl(true).Render()
|
Selection
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Selecting particular value |
Property: SelectValueByKey @Html.EJ().Autocomplete("autocomplete").SelectValueByKey(12)
|
Achievable through value property |
| Selecting particular value |
Property: value@Html.EJ().Autocomplete("autocomplete").Vallue("data")
|
Property: value@Html.EJS().AutoComplete("games").Value("data").Render()
|
| Selecting particular text |
Property: text@Html.EJ().Autocomplete("autocomplete").Text("data")
|
By using text property, you can acheive this. |
| Selecting particular value |
Method: SelectValueByKey@Html.EJ().Autocomplete("autocomplete")$("#autocomplete").selectValueByKey("key")
|
Achievable through value property |
| Selecting particular text |
Method: SelectValueByText @Html.EJ().Autocomplete("autocomplete")$("#autocomplete").selectValueByText("key")
|
Achievable through text property |
| Select event |
Event: Select@Html.EJ().Autocomplete("autocomplete").Select("onSelect")
|
Event: Select @Html.EJS().AutoComplete("games").Select("onSelect").Render()
|
Miscellaneous
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enable/disable |
Property: Enabled@Html.EJ().AutoComplete("autocomplete").Enabled(true)
|
Property: Enabled @Html.EJS().AutoComplete("games").Enabled(true).Render()
|
| Enable persistence |
Property: EnablePersistence@Html.EJ().AutoComplete("autocomplete").EnablePersistence(true)
|
Property: EnablePersistence @Html.EJS().AutoComplete("games").EnablePersistence(true).Render()
|
| Loading icon |
Property: ShowLoadingIcon @Html.EJ().AutoComplete("autocomplete").ShowLoadingIcon(true)
|
By default,it is showing |
| Read only |
Property: ReadOnly @Html.EJ().AutoComplete("autocomplete").ReadOnly(true)
|
Property: ReadOnly @Html.EJS().AutoComplete("games").ReadOnly(true).Render()
|
| Disable |
Method: disable@Html.EJ().AutoComplete("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: AddNewText@Html.EJ().Autocomplete("autocomplete").AddNewText("data")
|
Not applicable |
| Addition of new item |
Property: AllowAddNew @Html.EJ().Autocomplete("autocomplete").AllowAddNew(true)
|
Property: AllowCustom@Html.EJS().Autocomplete("autocomplete").AllowCustom(true).Render()
|
| Reset the autocomplete |
Property: ShowResetIcon @Html.EJ().Autocomplete("autocomplete").ShowResetIcon(true)
|
Property: ShowClearIcon @Html.EJS().Autocomplete("autocomplete").ShowClearIcon(true).Render()
|
| Destroy |
Method: destroy@Html.EJ().Autocomplete("autocomplete").AllowSorting(true)$("#autocomplete").ejAutoComplete("destroy");
|
Method: destroy @Html.EJS().Autocomplete("autocomplete").Render()var autoObj = document.getElementById("autocomplete").ej2_Instances[0];autoObj.destroy();
|
| Reset the autocomplete |
Method: clearText@Html.EJ().Autocomplete("autocomplete")$("#autocomplete").ejAutoComplete("clearText");
|
By passing empty value to the value property, you can acheive this |
| Multicolumn |
Property: MultiColumnSettings@Html.EJ().Autocomplete("autocomplete").Datasource((IEnumerable<CarsList>ViewBag.datasource).MultiColumnSettings(obj => obj.Enable(true).Columns(obj1 =>{obj1.Field("EmployeeID").HeaderText("EmployeeID").Add();obj1.Field("FirstName").HeaderText("FirstName").Add();obj1.Field("City").HeaderText("City").Add();}).ShowHeader(true).SearchColumnIndices(new List<int> { 0,1,2 }).StringFormat("{0}"))
|
Not applicable |
| Hide the Autocomplete |
Method: hide@Html.EJ().Autocomplete("autocomplete")$("#autocomplete").ejAutoComplete("hide");
|
By using css-class property, you can acheive this. |
| Getting particular text |
Method: GetActiveText @Html.EJ().Autocomplete("autocomplete")$("#autocomplete").ejAutoComplete("getActiveText");
|
By using text property, you can get it. |
| Getting particular value |
Method: getValue@Html.EJ().Autocomplete("autocomplete")$("#autocomplete").ejAutoComplete("getValue");
|
By using value property, you can get it. |
| Change event |
Event: Change@Html.EJ().Autocomplete("autocomplete").Change("onChange")
|
Event: Change @Html.EJS().Autocomplete("autocomplete").Change("onChange").Render()
|
| Create event |
Event: Create @Html.EJ().Autocomplete("autocomplete").Created("onCreate")
|
Event: Created @Html.EJS().Autocomplete("autocomplete").Created("onCreate").Render()
|
| Destroy event |
Event: Destroy @Html.EJ().Autocomplete("autocomplete").Destroy("onDestroy")
|
Event: Destroyed @Html.EJS().Autocomplete("autocomplete").Destroyed("ondestroy").Render()
|
| Focus out event |
Event: FocusOut@Html.EJ().Autocomplete("autocomplete").FocusOut("onFocusOut")
|
Event: Blur @Html.EJS().Autocomplete("autocomplete").Blur("onBlur").Render()
|
| Focus in event |
Event : FocusIn@Html.EJ().Autocomplete("autocomplete").FocusIn("onFocus")
|
Event: Focus @Html.EJS().Autocomplete("autocomplete").FocusIn("onFocus").Render()
|