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.
| 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 |
| 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 |
| 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() |
| 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() |
| 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. |
| 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() |
| 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() |
| 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>)")") |
| 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() |
| 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() |
| 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() |
| 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 |
| 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() |