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
@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()
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()