Search results

Migration from Essential JS 1 in JavaScript AutoComplete control

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

Filtering

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

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

Placeholder

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

$("#autocomplete").ejAutocomplete("open");
Method: showPopup
let groupObj: AutoComplete = new AutoComplete({});groupObj.appendTo('#vegetables');

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

CSS

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

Grouping

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

Localization

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

Template

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: template
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {template: "<span><span class='name'>${FirstName}</span><span class ='city'>${City}</span></span>"})
Property: itemTemplate
let groupObj: AutoComplete = new AutoComplete({itemTemplate: "<span><span class='name'>${FirstName}</span><span class ='city'>${City}</span></span>"});groupObj.appendTo('#vegetables');
Group Template Not Applicable Property: groupTemplate
let groupObj: AutoComplete = new AutoComplete({groupTemplate: "<strong>${City}</strong>"});groupObj.appendTo('#vegetables');
ValueTemplate Not applicable Property: valueTemplate
let groupObj: AutoComplete = new AutoComplete({valueTemplate: "<span>${FirstName} - ${City}</span>"});groupObj.appendTo('#vegetables');
Header Template Not applicable Property: headerTemplate
let groupObj: AutoComplete = new AutoComplete({headerTemplate: "<span class='head'><span class='name'>Name</span><span class='city'>City</span></span>",});groupObj.appendTo('#vegetables');
FooterTemplate Not applicable Property: footerTemplate
let groupObj: AutoComplete = new AutoComplete({footerTemplate:"<span class='foot'> Total list items: "+ sportsData.length +"</span>"});groupObj.appendTo('#vegetables');
No records Template Not applicable Property: noRecordsTemplate
let groupObj: AutoComplete = new AutoComplete({noRecordsTemplate:"<span class='norecord'> NO DATA AVAILABLE</span>"});groupObj.appendTo('#vegetables');
Action failure Template Not applicable Property: actionFailureTemplate
let groupObj: AutoComplete = new 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
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {allowSorting: true,});
Acheivable through sortOrder property
Order of sorting Property: sortOrder
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {sortOrder: "Ascending",});
Property: sortOrder
let groupObj: AutoComplete = new AutoComplete({sortOrder: "sortOrder"});groupObj.appendTo('#vegetables');

Accessibility

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

Selection

Behavior API in Essential JS 1 API in Essential JS 2
Selecting particular value Property: selectValueByKey
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {selectValueByKey: 1,});
Acheivable through the cssClass property.
Selecting particular value Property: value
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {value: data,});
Property: value
let groupObj: AutoComplete = new AutoComplete({value: "data"});groupObj.appendTo('#vegetables');
Selecting particular text Property: text
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {text: "data",});
Not applicable
Selecting particular value Method: selectValueByKey
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {});

$("#autocomplete").selectValueByKey("key")
Acheivable through the value property.
Selecting particular text Method: selectValueByText
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {});

$("#autocomplete").selectValueByText("key")
Not applicable
Select event Event: select
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {select: "onSelect",});
Event: select
let groupObj: AutoComplete = new AutoComplete({select: "onSelect"});groupObj.appendTo('#vegetables');

Miscellaneous

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

$("#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
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {addNewText:"text"});
Not applicable
Addition of new item Property: allowAddNew
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {allowAddNew: true});
Property: allowCustom
let groupObj: AutoComplete = new AutoComplete({allowCustom: true});groupObj.appendTo('#vegetables');
Reset the autocomplete Property: showResetIcon
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {showResetIcon: true});
Property: showClearIcon
let groupObj: AutoComplete = new AutoComplete({allowCustom: true});groupObj.appendTo('#vegetables');
Destroy Method: destroy
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {});

$("#autocomplete").ejAutoComplete("destroy");
Method: destroy
let groupObj: AutoComplete = new AutoComplete({allowCustom: true});groupObj.appendTo('#vegetables');``<br/><br/>groupObj.destroy();`
Reset the autocomplete Method: clearText
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {});

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

var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {});

$("#autocomplete").ejAutoComplete("hide");
By using css-class property, you can acheive this.
Getting particular text Method: getActiveText
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {});

$("#autocomplete").ejAutoComplete("getActiveText");
By using text property, you can get it.
Getting particular value Method: getValue
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {});

$("#autocomplete").ejAutoComplete("getValue");
By using value property, you can get it.
Change event Event: change
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {change:"change"});
Event: change
let groupObj: AutoComplete = new AutoComplete({change: "change"});groupObj.appendTo('#vegetables');
Create eventf Event: create
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {create:"create"});
Event: created
let groupObj: AutoComplete = new AutoComplete({created: "created"});groupObj.appendTo('#vegetables');
Destroy event Event: destroy
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {destroy:"destroy"});
Event: destroyed
let groupObj: AutoComplete = new AutoComplete({destroyed: "destroyed"});groupObj.appendTo('#vegetables');
Focus out event Event: focusOut
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {focusOut:"focusOut"});
Event: blur
let groupObj: AutoComplete = new AutoComplete({blur: "blur"});groupObj.appendTo('#vegetables');
Focus in event Event : focusIn
var autocompleteInstance =new ej.Autocomplete($("#autocomplete"), {focusIn:"focusIn"});
Event: focus
let groupObj: AutoComplete = new AutoComplete({focus: "focus"});groupObj.appendTo('#vegetables');