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
<EJ.Autocomplete id="default" dataSource = {carList} ></EJ.Autocomplete>
Property: dataSource
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} dataSource={this.cityData} />
Fields for mapping Property: fields
<EJ.Autocomplete id="default" fields = {fields} ></EJ.Autocomplete>
Property: fields
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} fields={this.fields} />
Query Property: query
<EJ.Autocomplete id="default" query = {query} ></EJ.Autocomplete>
Property: query
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} query={this.query} />
Begin event Event: actionBegin
<EJ.Autocomplete id="default" actionBegin = {actionBegin} ></EJ.Autocomplete>
Event: actionBegin
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} actionBegin={this.actionBegin.bind(this)} />
Complete event Event: actionComplete
<EJ.Autocomplete id="default" actionComplete = {actionComplete} ></EJ.Autocomplete>
Event: actionComplete
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} actionComplete={this.actionComplete.bind(this)} />
Failure event Event: actionFailure
<EJ.Autocomplete id="default" actionFailure = {actionFailure} ></EJ.Autocomplete>
Event: actionFailure
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} actionFailure={this.actionFailure.bind(this)} />
Success event Event: actionSuccess
<EJ.Autocomplete id="default" actionSuccess = {actionSuccess} ></EJ.Autocomplete>
Not Applicable

Filtering

Behavior API in Essential JS 1 API in Essential JS 2
Case sensitivity Property: caseSensitiveSearch
<EJ.Autocomplete id="default" caseSensitiveSearch = {true} ></EJ.Autocomplete>
Property: ignoreCase
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} ignoreCase={true} />
Accent effective search Not applicable Property : ignoreAccent
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} ignoreAccent={true} />
Filtering Type Property: filterType
<EJ.Autocomplete id="default" filterType = {filterType} ></EJ.Autocomplete>
Property: filterType
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} filterType={this.filterType} />
Autofill Property: enableAutoFill
<EJ.Autocomplete id="default" enableAutoFill = {true} ></EJ.Autocomplete>
Property:: autoFill
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} autoFill={true} />
Highlight the search word Property: highlightSearch
<EJ.Autocomplete id="default" highlightSearch = {true} ></EJ.Autocomplete>
Property: highlight
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} highlight={true} />
No of items to be shown Property: itemsCount
<EJ.Autocomplete id="default" itemsCount = {itemsCount} ></EJ.Autocomplete>
Property: suggestionCount
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} suggestionCount={this.suggestionCount} />
Minimum characters to enter Property: minCharacter
<EJ.Autocomplete id="default" minCharacter = {minCharacter} ></EJ.Autocomplete>
Property: minLength
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} minLength={this.minLength} />
Search Method: search
<EJ.Autocomplete id="autocomplete" ></EJ.Autocomplete>

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

Placeholder

Behavior API in Essential JS 1 API in Essential JS 2
Watermark text Property: watermarkText
<EJ.Autocomplete id="default" watermarkText = {watermarkText} ></EJ.Autocomplete>
Property: placeholder
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} placeholder={this.placeholder} />
Floating of watermark text Not applicable Property: floatLabelType
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} floatLabelType={this.floatLabelType} />
Behavior API in Essential JS 1 API in Essential JS 2
No records text Property: emptyResultText
<EJ.Autocomplete id="default" emptyResultText = {emptyResultText} ></EJ.Autocomplete>
Property: noRecordsTemplate
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} noRecordsTemplate={this.noRecordsTemplate} />
No records showing Property: showEmptyResultText
<EJ.Autocomplete id="default" showEmptyResultText = {true} ></EJ.Autocomplete>
Not applicable
Popupbutton Property: showPopupButton
<EJ.Autocomplete id="default" showPopupButton = {showPopupButton} ></EJ.Autocomplete>
Property: showPopupButton
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} showPopupButton={this.showPopupButton} />
Clear button Property: showResetIcon
<EJ.Autocomplete id="default" showResetIcon = {showResetIcon} ></EJ.Autocomplete>
Property: showClearButton
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} showClearButton={this.showClearButton} />
Animation Property: animateType
<EJ.Autocomplete id="default" animateType = {animateType} ></EJ.Autocomplete>
Not Applicable
Focusing the list item Property: autoFocus
<EJ.Autocomplete id="default" autoFocus = {true} ></EJ.Autocomplete>
Not applicable
Delaying the popup open time Property: delaySuggestionTimeout
<EJ.Autocomplete id="default" delaySuggestionTimeout = {delaySuggestionTimeout} ></EJ.Autocomplete>
Not applicable
Popup text when there is no popup items Property: emptyResultText
<EJ.Autocomplete id="default" emptyResultText = {emptyResultText} ></EJ.Autocomplete>
https://ej2.syncfusion.com/react/demos/#/material/auto-complete/template
Enable/disable the duplicate option Property: enableDistinct
<EJ.Autocomplete id="default" enableDistinct = {true} ></EJ.Autocomplete>
Not applicable
Popup height Property: popupHeight
<EJ.Autocomplete id="default" popupHeight = {popupHeight} ></EJ.Autocomplete>
Property: popupHeight
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} popupHeight={this.popupHeight} />
Popup Width Property: popupWidth
<EJ.Autocomplete id="default" popupWidth = {popupWidth} ></EJ.Autocomplete>
Property: popupWidth
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} popupWidth={this.popupWidth} />
Open popup Method: open
<EJ.Autocomplete id="autocomplete" ></EJ.Autocomplete>
$("#autocomplete").ejAutocomplete("open");
Method: showPopup
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} />

this.cmbObj.showPopup();
Close event Event: close
<EJ.Autocomplete id="autocomplete" close = "close" ></EJ.Autocomplete>
Event: close
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} close={this.close.bind(this)} />
Open event Event: open
<EJ.Autocomplete id="autocomplete" open="open"></EJ.Autocomplete>
Event: open
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} open={this.open.bind(this)} />

CSS

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: cssClass
<EJ.Autocomplete id="autocomplete" cssClass="cssClass"></EJ.Autocomplete>
Property: cssClass
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} cssClass={this.cssClass} />
Height Property: height
<EJ.Autocomplete id="autocomplete" height="400px"></EJ.Autocomplete>
Acheivable through the cssClass property.
showRoundedCorner Property: showRoundedCorner
<EJ.Autocomplete id="autocomplete" showRoundedCorner={true}></EJ.Autocomplete>
Acheivable through the cssClass property.
Width Property: width
<EJ.Autocomplete id="autocomplete" width="300px"></EJ.Autocomplete>
Property: width
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} width={this.width} />
Visibility Property: visible
<EJ.Autocomplete id="autocomplete" visible={true}></EJ.Autocomplete>
Acheivable through the cssClass property.

Grouping

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: fields
<EJ.Autocomplete id="default" fields = {fields} ></EJ.Autocomplete>
Property: fields
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} fields={this.fields} />

Localization

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: Locale
<EJ.Autocomplete id="default" locale = {"fr-FE"} ></EJ.Autocomplete>
Property: Locale
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} locale={this.locale} />

Template

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: template <EJ.Autocomplete id="default" template = {template} ></EJ.Autocomplete> Property: itemTemplate
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} itemTemplate={this.itemTemplate} />
Group Template Not Applicable Property: groupTemplate
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} groupTemplate={this.groupTemplate} />
ValueTemplate Not applicable Property: valueTemplate
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} valueTemplate={this.valueTemplate} />
Header Template Not applicable Property: headerTemplate
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} headerTemplate={this.headerTemplate} />
FooterTemplate Not applicable Property: footerTemplate
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} footerTemplate={this.footerTemplate} />
No records Template Not applicable Property: noRecordsTemplate
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} noRecordsTemplate={this.noRecordsTemplate} />
Action failure Template Not applicable Property: actionFailureTemplate
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} actionFailureTemplate={this.actionFailureTemplate} />

Sorting

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: allowSorting
<EJ.Autocomplete id="default" allowSorting = {true} ></EJ.Autocomplete>
Acheivable through sortOrder property
Order of sorting Property: sortOrder
<EJ.Autocomplete id="default" sortOrder = {sortOrder} ></EJ.Autocomplete>
Property: sortOrder
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} sortOrder={this.sortOrder} />

Accessibility

Behavior API in Essential JS 1 API in Essential JS 2
RTL support Property: enableRtl
<EJ.Autocomplete id="default" enableRtl = {true} ></EJ.Autocomplete>
Property: enableRtl
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} enableRtl={this.enableRtl} />

Selection

Behavior API in Essential JS 1 API in Essential JS 2
Selecting particular value Property: selectValueByKey
<EJ.Autocomplete id="default" selectValueByKey = {selectValueByKey} ></EJ.Autocomplete>
Achievable through value property.
Selecting particular value Property: value
<EJ.Autocomplete id="default" value = {value} ></EJ.Autocomplete>
Property: value
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} value={this.value} />
Selecting particular text Property: text
<EJ.Autocomplete id="default" text = {text} ></EJ.Autocomplete>
Not Applicable
Selecting particular value Method: selectValueByKey
<EJ.Autocomplete id="autocomplete" enableRtl = {true} ></EJ.Autocomplete>
$("#autocomplete").selectValueByKey("key")
Achievable through value property.
Selecting particular text Method: selectValueByText
<EJ.Autocomplete id="autocomplete" enableRtl = {true} ></EJ.Autocomplete>
$("#autocomplete").selectValueByText("key")
Not applicable
Select event Event: select
<EJ.Autocomplete id="default" select = "select" ></EJ.Autocomplete>
Event: select
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} select={this.select.bind(this)} />

Miscellaneous

Behavior API in Essential JS 1 API in Essential JS 2
Enable/disable Property: enabled
<EJ.Autocomplete id="default" enabled = {true} ></EJ.Autocomplete>
Property: enabled
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} enabled={true} />
Enable persistence Property: enablePersistence
<EJ.Autocomplete id="default" enablePersistence = {true} ></EJ.Autocomplete>
Property: enablePersistence
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} enablePersistence={true} />
Loading icon Property: showLoadingIcon
<EJ.Autocomplete id="default" showLoadingIcon = {true} ></EJ.Autocomplete>
By default,it is showing
Read only Property: readOnly
<EJ.Autocomplete id="default" readOnly = {true} ></EJ.Autocomplete>
Property: readOnly
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} readOnly={this.readOnly} />
Disable Method: disable
<EJ.Autocomplete id="autocomplete"></EJ.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
<EJ.Autocomplete id="default" addNewText = {addNewText} ></EJ.Autocomplete>
Not applicable
Addition of new item Property: allowAddNew
<EJ.Autocomplete id="default" allowAddNew = {true} ></EJ.Autocomplete>
Property: allowCustom
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} allowCustom={true} />
Reset the autocomplete Property: showResetIcon
<EJ.Autocomplete id="default" showResetIcon = {true} ></EJ.Autocomplete>
Property: showClearIcon
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} showClearIcon={true} />
Destroy Method: destroy
<EJ.Autocomplete id="autocomplete" ></EJ.Autocomplete>
$("#autocomplete").ejAutoComplete("destroy");
Method: destroy
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} />

this.cmbObj.destroy();
Reset the autocomplete Method: clearText
<EJ.Autocomplete id="autocomplete" ></EJ.Autocomplete>
$("#autocomplete").ejAutoComplete("clearText");
Property: value
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} value="" />
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
<EJ.Autocomplete id="autocomplete" ></EJ.Autocomplete>
$("#autocomplete").ejAutoComplete("hide");
Acheivable through the cssClass property.
Getting particular text Method: getActiveText
<EJ.Autocomplete id="autocomplete" ></EJ.Autocomplete>
$("#autocomplete").ejAutoComplete("getActiveText");
Not applicable
Getting particular value Method: getValue
<EJ.Autocomplete id="autocomplete" ></EJ.Autocomplete>
$("#autocomplete").ejAutoComplete("getValue");
Achievable through value property.
Change event Event: change
<EJ.Autocomplete id="default" change = "change" ></EJ.Autocomplete>
Event: change
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} change={this.change.bind(this)} />
Create event Event: create
<EJ.Autocomplete id="default" create = "create" ></EJ.Autocomplete>
Event: created
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} created={this.created.bind(this)} />
Destroy event Event: destroy
<EJ.Autocomplete id="default" destroy = "destroy" ></EJ.Autocomplete>
Event: destroyed
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} destroyed={this.destroyed.bind(this)} />
Focus out event Event: focusOut
<EJ.Autocomplete id="default" focusOut = "focusOut" ></EJ.Autocomplete>
Event: blur
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} blur={this.blur.bind(this)} />
Focus in event Event : focusIn
<EJ.Autocomplete id="default" focusIn = "focusIn" ></EJ.Autocomplete>
Event: focus
<AutoCompleteComponent id="atcelement" ref={(scope) => { this.cmbObj = scope; }} focus={this.focus.bind(this)} />