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
$('#autocomplete').ejAutocomplete({ dataSource: countriesField,});
Property: dataSource
var groupObj = new ej.dropdowns.AutoComplete({dataSource: vegetableData,});groupObj.appendTo('#vegetables');
Fields for mapping Property: fields
$('#autocomplete').ejAutocomplete({fields: { key: "index", text: "name" },});
Property: fields
var groupObj = new ej.dropdowns.AutoComplete({fields: { groupBy: 'Category', value: 'Vegetable' },});groupObj.appendTo('#vegetables');
Query Property: query
$('#autocomplete').ejAutocomplete({query: query,});
Property: query
var groupObj = new ej.dropdowns.AutoComplete({query: ej.Query().requiresCount(),});groupObj.appendTo('#vegetables');
Begin event Event: actionBegin
$('#autocomplete').ejAutocomplete({actionBegin: "actionBegin",});
Event: actionBegin
var groupObj = new ej.dropdowns.AutoComplete({actionBegin: "actionBegin",});groupObj.appendTo('#vegetables');
Complete event Event: actionComplete
$('#autocomplete').ejAutocomplete({actionComplete: "actionComplete",});
Event: actionComplete
var groupObj = new ej.dropdowns.AutoComplete({actionComplete: "actionComplete",});groupObj.appendTo('#vegetables');
Failure event Event: actionFailure
$('#autocomplete').ejAutocomplete({actionFailure: "actionFailure",});
Event: actionFailure
var groupObj = new ej.dropdowns.AutoComplete({actionFailure: "actionFailure",});groupObj.appendTo('#vegetables');
Success event Event: actionSuccess
$('#autocomplete').ejAutocomplete({actionSuccess: "actionSuccess",});
Not Applicable

Filtering

Behavior API in Essential JS 1 API in Essential JS 2
Case sensitivity Property: caseSensitiveSearch
$('#autocomplete').ejAutocomplete({ caseSensitiveSearch: true,});
Property: ignoreCase
var groupObj = new ej.dropdowns.AutoComplete({ignoreCase: true,});groupObj.appendTo('#vegetables');
Accent effective search Not applicable Property : ignoreAccent
var groupObj = new ej.dropdowns.AutoComplete({ignoreAccent: true,});groupObj.appendTo('#vegetables');
Filtering Type Property: filterType
$('#autocomplete').ejAutocomplete({ filterType: "Contains",});
Property: filterType
var groupObj = new ej.dropdowns.AutoComplete({filterType: filtertype,});groupObj.appendTo('#vegetables');
Autofill Property: enableAutoFill
$('#autocomplete').ejAutocomplete({ enableAutoFill: true,});
Property:: autoFill
var groupObj = new ej.dropdowns.AutoComplete({autoFill: true,});groupObj.appendTo('#vegetables');
Highlight the search word Property: highlightSearch $('#autocomplete').ejAutocomplete({ highlightSearch: true,}); Property: highlight
var groupObj = new ej.dropdowns.AutoComplete({highlight: true,});groupObj.appendTo('#vegetables');
No of items to be shown Property: itemsCount
$('#autocomplete').ejAutocomplete({ itemsCount: 3,});
Property: suggestionCount
var groupObj = new ej.dropdowns.AutoComplete({suggestionCount: 5,});groupObj.appendTo('#vegetables');
Minimum characters to enter Property: minCharacter
$('#autocomplete').ejAutocomplete({ minCharacter: 3,});
Property: minLength
var groupObj = new ej.dropdowns.AutoComplete({minLength: 4,});groupObj.appendTo('#vegetables');
Search Method: search
$("#autocomplete").ejAutocomplete("search");
Not applicable

Placeholder

Behavior API in Essential JS 1 API in Essential JS 2
Watermark text Property: watermarkText
$('#autocomplete').ejAutocomplete({watermarkText:"select" });
Property: placeholder
var groupObj = new ej.dropdowns.AutoComplete({placeholder: "Select",});groupObj.appendTo('#vegetables');
Floating of watermark text Not applicable Property: floatLabelType
var groupObj = new ej.dropdowns.AutoComplete({floatLabelType: floatLabelType,});groupObj.appendTo('#vegetables');
Behavior API in Essential JS 1 API in Essential JS 2
No records text Property: emptyResultText
$('#autocomplete').ejAutocomplete({emptyResultText:"no records" });
Property: noRecordsTemplate
var groupObj = new ej.dropdowns.AutoComplete({noRecordsTemplate: noRecordsTemplate,});groupObj.appendTo('#vegetables');
No records showing Property: showEmptyResultText
$('#autocomplete').ejAutocomplete({showEmptyResultText:true })
Not applicable
Popupbutton Property: showPopupButton
$('#autocomplete').ejAutocomplete({ShowPopupButton:true })
Property: showPopupButton
var groupObj = new ej.dropdowns.AutoComplete({showPopupButton: true,});groupObj.appendTo('#vegetables');
Clear button Property: showResetIcon
$('#autocomplete').ejAutocomplete({showResetIcon:true })
Property: showClearButton
var groupObj = new ej.dropdowns.AutoComplete({showClearButton: true,});groupObj.appendTo('#vegetables');
Animation Property: animateType
$('#autocomplete').ejAutocomplete({animateType:animateType })
Not Applicable
Focusing the list item Property: AutoFocus
@Html.EJ().Autocomplete("selectCar").AutoFocus("true")
Not applicable
Delaying the popup open time Property: delaySuggestionTimeout
$('#autocomplete').ejAutocomplete({delaySuggestionTimeout:300 })
Not applicable
Popup text when there is no popup items Property: emptyResultText
$('#autocomplete').ejAutocomplete({emptyResultText:"no Records" })
https://ej2.syncfusion.com/javascript/demos/#/material/auto-complete/template.html
Enable/disable the duplicate option Property: enableDistinct
$('#autocomplete').ejAutocomplete({enableDistinct:true })
Not applicable
Popup height Property: popupHeight
$('#autocomplete').ejAutocomplete({popupHeight:300px })
Property: popupHeight
var groupObj = new ej.dropdowns.AutoComplete({popupHeight: 300px,});groupObj.appendTo('#vegetables');
Popup Width Property: popupWidth
$('#autocomplete').ejAutocomplete({popupWidth:300px })
Property: popupWidth
var groupObj = new ej.dropdowns.AutoComplete({popupWidth: 300px,});groupObj.appendTo('#vegetables');
Open popup Method: open
$("#autocomplete").ejAutocomplete("open");
Method: showPopup
var groupObj = new ej.dropdowns.AutoComplete({});groupObj.appendTo('#vegetables');

groupObj.showPopup();
Close event Event: close
$('#autocomplete').ejAutocomplete({close:"onClose" })
Event: close
var groupObj = new ej.dropdowns.AutoComplete({close:"close",});groupObj.appendTo('#vegetables');
Open event Event: open
$('#autocomplete').ejAutocomplete({open:"onopen" })
Event: open
var groupObj = new ej.dropdowns.AutoComplete({open:"open",});groupObj.appendTo('#vegetables');

CSS

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: cssClass
$('#autocomplete').ejAutocomplete({cssClass:"cssClass" })
Property: cssClass
var groupObj = new ej.dropdowns.AutoComplete({cssClass:"cssClass",});groupObj.appendTo('#vegetables');
Height Property: height
$('#autocomplete').ejAutocomplete({height:"300px" })
Acheivable through the cssClass property
showRoundedCorner Property: showRoundedCorner
$('#autocomplete').ejAutocomplete({showRoundedCorner:true })
Acheivable through the cssClass property.
Width Property: width
$('#autocomplete').ejAutocomplete({width:300px })
Property: width
var groupObj = new ej.dropdowns.AutoComplete({width:"300px",});groupObj.appendTo('#vegetables');
Visibility Property: visible
$('#autocomplete').ejAutocomplete({visible:true })
Acheivable through the cssClass property.

Grouping

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: fields
$('#autocomplete').ejAutocomplete({fields: { key: "index", groupBy: "name" },});
Property: fields
var groupObj = new ej.dropdowns.AutoComplete({fields: { groupBy: 'Category', value: 'Vegetable' },});groupObj.appendTo('#vegetables');

Localization

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: Locale
$('#autocomplete').ejAutocomplete({lcoale: "fr-FE",});
Property: Locale
var groupObj = new ej.dropdowns.AutoComplete({locale: "fr-FE"});groupObj.appendTo('#vegetables');

Template

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: template $('#autocomplete').ejAutocomplete({template: "<span><span class='name'>${FirstName}</span><span class ='city'>${City}</span></span>"}) Property: itemTemplate
var groupObj = new ej.dropdowns.AutoComplete({itemTemplate: "<span><span class='name'>${FirstName}</span><span class ='city'>${City}</span></span>"});groupObj.appendTo('#vegetables');
Group Template Not Applicable Property: groupTemplate
var groupObj = new ej.dropdowns.AutoComplete({groupTemplate: "<strong>${City}</strong>"});groupObj.appendTo('#vegetables');
ValueTemplate Not applicable Property: valueTemplate
var groupObj = new ej.dropdowns.AutoComplete({valueTemplate: "<span>${FirstName} - ${City}</span>"});groupObj.appendTo('#vegetables');
Header Template Not applicable Property: headerTemplate
var groupObj = new ej.dropdowns.AutoComplete({headerTemplate: "<span class='head'><span class='name'>Name</span><span class='city'>City</span></span>",});groupObj.appendTo('#vegetables');
FooterTemplate Not applicable Property: footerTemplate
var groupObj = new ej.dropdowns.AutoComplete({footerTemplate:"<span class='foot'> Total list items: "+ sportsData.length +"</span>"});groupObj.appendTo('#vegetables');
No records Template Not applicable Property: noRecordsTemplate
var groupObj = new ej.dropdowns.AutoComplete({noRecordsTemplate:"<span class='norecord'> NO DATA AVAILABLE</span>"});groupObj.appendTo('#vegetables');
Action failure Template Not applicable Property: actionFailureTemplate
var groupObj = new ej.dropdowns.AutoComplete({actionFailureTemplate:"<span class='action-failure'> Data fetch get fails</span>"});groupObj.appendTo('#vegetables');

Sorting

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: allowSorting
$('#autocomplete').ejAutocomplete({allowSorting: true,});
Acheivable through sortOrder property
Order of sorting Property: sortOrder
$('#autocomplete').ejAutocomplete({sortOrder: "Ascending",});
Property: sortOrder
var groupObj = new ej.dropdowns.AutoComplete({sortOrder: "sortOrder"});groupObj.appendTo('#vegetables');

Accessibility

Behavior API in Essential JS 1 API in Essential JS 2
RTL support Property: enableRtl
$('#autocomplete').ejAutocomplete({enableRtl: true,});
Property: enableRtl
var groupObj = new ej.dropdowns.AutoComplete({enableRtl: true});groupObj.appendTo('#vegetables');

Selection

Behavior API in Essential JS 1 API in Essential JS 2
Selecting particular value Property: selectValueByKey
$('#autocomplete').ejAutocomplete({selectValueByKey: 1,});
Achievable through value property
Selecting particular value Property: value
$('#autocomplete').ejAutocomplete({value: data,});
Property: value
var groupObj = new ej.dropdowns.AutoComplete({value: "data"});groupObj.appendTo('#vegetables');
Selecting particular text Property: text
$('#autocomplete').ejAutocomplete({text: "data",});
Not Applicable
Selecting particular value Method: selectValueByKey
$("#autocomplete").selectValueByKey("key")
Achievable through value property
Selecting particular text Method: selectValueByText
$("#autocomplete").selectValueByText("key")
Not Applicable
Select event Event: select
$('#autocomplete').ejAutocomplete({select: "onSelect",});
Event: select
var groupObj = new ej.dropdowns.AutoComplete({select: "onSelect"});groupObj.appendTo('#vegetables');

Miscellaneous

Behavior API in Essential JS 1 API in Essential JS 2
Enable/disable Property: enabled
$('#autocomplete').ejAutocomplete({enabled: true,});
Property: enabled
var groupObj = new ej.dropdowns.AutoComplete({enabled: true});groupObj.appendTo('#vegetables');
Enable persistence Property: enablePersistence
$('#autocomplete').ejAutocomplete({enablePersistence: true,});
Property: enablePersistence
var groupObj = new ej.dropdowns.AutoComplete({enablePersistence: true});groupObj.appendTo('#vegetables');
Loading icon Property: showLoadingIcon
$('#autocomplete').ejAutocomplete({showLoadingIcon: true,});
By default,it is showing
Read only Property: readOnly
$('#autocomplete').ejAutocomplete({readOnly: true,});
Property: readOnly
var groupObj = new ej.dropdowns.AutoComplete({readOnly: true});groupObj.appendTo('#vegetables');
Disable Method: disable
$("#autocomplete").ejAutoComplete("disable");
Achievable through enabled property

Common

Behavior API in Essential JS 1 API in Essential JS 2
Addition of new option watermark text Property: addNewText
$('#autocomplete').ejAutocomplete({addNewText:"text"});
Not applicable
Addition of new item Property: allowAddNew
$('#autocomplete').ejAutocomplete({allowAddNew: true});
Property: allowCustom
var groupObj = new ej.dropdowns.AutoComplete({allowCustom: true});groupObj.appendTo('#vegetables');
Reset the autocomplete Property: showResetIcon
$('#autocomplete').ejAutocomplete({showResetIcon: true});
Property: showClearIcon
var groupObj = new ej.dropdowns.AutoComplete({allowCustom: true});groupObj.appendTo('#vegetables');
Destroy Method: destroy
$("#autocomplete").ejAutoComplete("destroy");
Method: destroy
var groupObj = new ej.dropdowns.AutoComplete({allowCustom: true});groupObj.appendTo('#vegetables');

groupObj.destroy();
Reset the autocomplete Method: clearText
$("#autocomplete").ejAutoComplete("clearText");
Property: value
var groupObj = new ej.dropdowns.AutoComplete({value: ""});groupObj.appendTo('#vegetables');
Multicolumn Property: multiColumnSettings
var autocompleteInstance =new ej.Autocomplete($("#selectCar"), {multiColumnSettings:{enable:true,showHeader:true,stringFormat:"{1}",searchColumnIndices[0,1,2],
columns:[{"field": "EmployeeID" ,"headerText":"EmployeeID"},{"field": "FirstName" , "headerText":"FirstName"},{"field": "City" , "headerText":"City"}]}});
Not applicable
Hide the Autocomplete Method: hide
$("#autocomplete").ejAutoComplete("hide");
Acheivable through the cssClass property.
Getting particular text Method: getActiveText
$("#autocomplete").ejAutoComplete("getActiveText");
Not Applicable
Getting particular value Method: getValue
$("#autocomplete").ejAutoComplete("getValue");
Acheivable through the value property.
Change event Event: change
$('#autocomplete').ejAutocomplete({change:"change"});
Event: change
var groupObj = new ej.dropdowns.AutoComplete({change: "change"});groupObj.appendTo('#vegetables');
Create event Event: create
$('#autocomplete').ejAutocomplete({create:"create"});
Event: created
var groupObj = new ej.dropdowns.AutoComplete({created: "created"});groupObj.appendTo('#vegetables');
Destroy event Event: destroy
$('#autocomplete').ejAutocomplete({destroy:"destroy"});
Event: destroyed
var groupObj = new ej.dropdowns.AutoComplete({destroyed: "destroyed"});groupObj.appendTo('#vegetables');
Focus out event Event: focusOut
$('#autocomplete').ejAutocomplete({focusOut:"focusOut"});
Event: blur
var groupObj = new ej.dropdowns.AutoComplete({blur: "blur"});groupObj.appendTo('#vegetables');
Focus in event Event : focusIn
$('#autocomplete').ejAutocomplete({focusIn:"focusIn"});
Event: focus
var groupObj = new ej.dropdowns.AutoComplete({focus: "focus"});groupObj.appendTo('#vegetables');