ejAutocomplete

5 Oct 201724 minutes to read

The AutoComplete control is a textbox control that provides a list of suggestions based on the user query.When the users enters the text in the text box, the control performs a search operation and provides a list of results in the suggestion pop up. There are several filter types available to perform the search.

Example

Requires

• module:jQuery

• module:ej.core.js

• module:ej.data.js

• module:ej.autocomplete.js

• module:ej.scroller.js

Members

addNewText string

Customize “Add New” text (label) to be added in the autocomplete popup list for the entered text when there are no suggestions for it.

NOTE

This property is applicable only when the “MultiSelectMode” property is set as “VisualMode” and “AllowAddNew” property is set as “true”.

Default Value:

• “Add New”

Example

HTML

<input type="text" id="visualmode" ej-autocomplete width="100%" multiSelectMode="visualmode" watermarkText="Select skills" [dataSource]="language" [allowAddNew]="true" addNewText="Custom text not in list"/>

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }

allowAddNew boolean

Allows new values to be added to the autocomplete input other than the values in the suggestion list. Normally, when there are no suggestions it will display “No suggestions” label in the popup.

NOTE

This property will work only when the “MultiSelectMode” property is set as “VisualMode”

Default Value:

• false

Example

HTML

<input type="text" id="visualmode" ej-autocomplete width="100%" multiSelectMode="visualmode" watermarkText="Select skills" [dataSource]="language" [allowAddNew]="true" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }

allowSorting boolean

Enables or disables the sorting of suggestion list item. The default sort order is ascending order. You customize sort order.

See Also

 SortOrder

Default Value:

• true

Example

HTML

<input type="text" id="visualmode" ej-autocomplete width="100%" multiSelectMode="visualmode" watermarkText="Select skills" [dataSource]="language" [allowSorting]="true"/>

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script',
            'ASP', 'BASIC', 'BeanShell',  'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'C', 'C++', 'C#', 'Clojure', 'Python', 'Ruby', 'Scala',
            'Groovy', 'Haskell', 'Lisp', 'MATLAB', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Oak', 'Perl', 'PHP',
             'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }

animateType enum

Enables or disables selecting the animation style for the popup list. Animation types can be selected through either of the following options,

Name	Description
none	Supports to animation type with none type only.
slide	Supports to animation type with slide type only.
fade	Supports to animation type with fade type only.

Default Value:

• slide

Example

HTML

<input type="text" id="visualmode" ej-autocomplete width="100%" [dataSource]="language" [animateType]="animate" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
        this.animate = ej.Animation.Fade;
    }

autoFocus boolean

To focus the items in the suggestion list when the popup is shown. By default first item will be focused.

Default Value:

• false

Example

HTML

<input type="text" id="autocompletecomp" ej-autocomplete width="100%" [dataSource]="language" [autoFocus]="true" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }

caseSensitiveSearch boolean

Enables or disables the case sensitive search.

Default Value:

• false

Example

HTML

<input type="text" id="autocompletecomp" ej-autocomplete width="100%" [dataSource]="language" [caseSensitiveSearch]="true" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }

cssClass string

The root class for the Autocomplete textbox widget which helps in customizing its theme.

Default Value:

• ””

Example

HTML

<input type="text" id="autocompletecomp" ej-autocomplete width="100%" [dataSource]="language" cssClass="customCSS" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }

CSS

.customCSS .e-autocomplete {
        background-color: azure;
        font-weight: 700;
    }

dataSource Object|Array

The data source contains the list of data for the suggestions list. It can be a string array or JSON array or service URL that returns JSON.

Default Value:

• null

Example

HTML

<input type="text" id="visualmode" ej-autocomplete width="100%" [dataSource]="language" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }

delaySuggestionTimeout number

The time delay (in milliseconds) after which the suggestion popup will be shown.

Default Value:

• 200

Example

HTML

<input type="text" id="visualmode" ej-autocomplete [dataSource]="language" [delaySuggestionTimeout]="400" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }

delimiterChar string

The special character which acts as a separator for the given words for multi-mode search i.e. the text after the delimiter are considered as a separate word or query for search operation.

NOTE

1. This property is applicable only when the “MultiSelectMode” property set as “Delimiter”.
2. The delimiter string should have a single character and must be a symbol.
3. Mostly the delimiter symbol is used as (comma ,) or (semi-colon ;) or any other special character.

Default Value:

• ’,’

Example

HTML

<input type="text" id="visualmode" ej-autocomplete width="100%" multiSelectMode="delimiter" [dataSource]="language" [delimiterChar]=";" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }

emptyResultText string

The text to be displayed in the popup when there are no suggestions available for the entered text.

NOTE

This property is applicable only when the showEmptyResultText property set as “true”

Default Value:

• “No suggestions”

Example

HTML

<input type="text" id="visualmode" ej-autocomplete [dataSource]="language" [emptyResultText]="Suggestion not found" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }

enableAutoFill boolean

Fills the autocomplete textbox with the first matched item from the suggestion list automatically based on the entered text when enabled.

NOTE

This property works only when “filterType” property is set as “startswith”

Default Value:

• false

Example

HTML

<input type="text" id="visualmode" ej-autocomplete [dataSource]="language" [enableAutoFill]="true" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }

enabled boolean

Enables or disables the Autocomplete textbox widget.

Default Value:

• true

Example

HTML

<input type="text" id="visualmode" ej-autocomplete [dataSource]="language" [enabled]="false" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }

enableDistinct boolean

Enables or disables displaying the duplicate names present in the search result.

Default Value:

• false

Example

HTML

<input type="text" id="visualmode" ej-autocomplete [dataSource]="language" [enableDistinct]="true" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'Java', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'Lisp', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'ColdFusion', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }

enablePersistence boolean

Allows the current model values to be saved in local storage or browser cookies for state maintenance when it is set to true. While refreshing the page, it retains the model value from browser cookies or local storage.

NOTE

Local storage is supported only in Html5 supported browsers. If the browsers don’t have support for local storage, browser cookies will be used to maintain the state.

Default Value:

• false

Example

HTML

<input type="text" id="visualmode" ej-autocomplete [dataSource]="language" [enablePersistence]="true" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }

enableRTL boolean

Displays the Autocomplete widget’s content from right to left when enabled.

Default Value:

• false

Example

HTML

<input type="text" id="visualmode" ej-autocomplete [dataSource]="language" [enableRTL]="true" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }

fields Object

Mapping fields for the suggestion items of the Autocomplete textbox widget.

Default Value:

• null

fields.groupBy string

Used to group the suggestion list items.

fields.htmlAttributes Object

Defines the HTML attributes such as id, class, styles for the item.

fields.key string

Defines the specific field name which contains unique key values for the list items.

fields.text string

Defines the specific field name in the data source to load the suggestion list with data.

Example

HTML

<input type="text" id="searchbox" ej-autocomplete width="100%" [dataSource]="states" [fields]="fields" />

TS

constructor() {
        this.fields = { text: 'countryName' };
        this.states = [
            { index: 's1', countryName: 'Alabama' }, { index: 's2', countryName: 'Alaska' },
            { index: 's3', countryName: 'Arizona' }, { index: 's4', countryName: 'Arkansas' },
            { index: 's5', countryName: 'California' }, { index: 's6', countryName: 'Colorado' },
            { index: 's20', countryName: 'Maryland' }, { index: 's21', countryName: 'Massachusetts' },
            { index: 's22', countryName: 'Michigan' }, { index: 's23', countryName: 'Montana' },
            { index: 's24', countryName: 'New Mexico' }, { index: '25', countryName: 'New York' },
            { index: '26', countryName: 'North Carolina' }, { index: 's27', countryName: 'Nevada' },
            { index: 's39', countryName: 'Vermont' }, { index: 's40', countryName: 'Virginia' },
            { index: 's41', countryName: 'Washington' }, { index: 's42', countryName: 'West Virginia' },
            { index: 's43', countryName: 'Wisconsin' }, { index: 's44', countryName: 'Wyoming' }
        ];

    }

filterType string

Specifies the search filter type. There are several types of search filter available such as ‘startswith’, ‘contains’, ‘endswith’, ‘lessthan’, ‘lessthanorequal’, ‘greaterthan’, ‘greaterthanorequal’, ‘equal’, ‘notequal’.

Default Value:

• ej.filterType.StartsWith

Example

HTML

<input type="text" id="visualmode" ej-autocomplete [dataSource]="language" [filterType]="type" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }
    this.type = ej.FilterOperators.contains;

height string|number

The height of the Autocomplete textbox.

Default Value:

• null

Example

HTML

<input type="text" id="visualmode" ej-autocomplete height="70px" [dataSource]="language" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }

highlightSearch boolean

The search text can be highlighted in the AutoComplete suggestion list when enabled.

Default Value:

• false

Example

HTML

<input type="text" id="visualmode" ej-autocomplete [dataSource]="language" [highlightSearch]="true" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }

itemsCount number

Number of items to be displayed in the suggestion list.

Default Value:

• 0

Example

HTML

<input type="text" id="visualmode" ej-autocomplete [dataSource]="language" [itemsCount]="count" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
        this.count = 5;
    }

locale string

Set the localization culture for Autocomplete Widget.

Default Value:

“en-US”

Example

minCharacter number

Minimum number of character to be entered in the Autocomplete textbox to show the suggestion list.

Default Value:

• 1

Example

HTML

<input type="text" id="visualmode" ej-autocomplete [dataSource]="language" [minCharacter]="count" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
        this.count = 2;
    }

multiColumnSettings Object

An Autocomplete column collection can be defined and customized through the multiColumnSettings property.
Column’s header, field, and stringFormat can be define via multiColumnSettings properties.

Example

HTML

<input type="text" id="automulticolumn" ej-autocomplete [dataSource]="multicolumndataList" fields="multicolumnfields" [multiColumnSettings]="multicolumncolset" width="300px"/>

TS

multicolumndataList: Array<any>;
    multicolumncolset: Object;
    multicolumnfields: Object;
    value: string;
    constructor() {
        this.multicolumndataList = [{ 'EmployeeID': 1, 'FirstName': 'Nancy', 'City': 'Seattle' },
        { 'EmployeeID': 2, 'FirstName': 'Andrew', 'City': 'Tacoma' },
        { 'EmployeeID': 3, 'FirstName': 'Janet', 'City': 'Kirkland' },
        { 'EmployeeID': 4, 'FirstName': 'Margaret', 'City': 'Redmond' },
        { 'EmployeeID': 5, 'FirstName': 'Steven', 'City': 'London' },
        { 'EmployeeID': 6, 'FirstName': 'Michael', 'City': 'London' },
        { 'EmployeeID': 7, 'FirstName': 'Robert', 'City': 'London' },
        { 'EmployeeID': 8, 'FirstName': 'Laura', 'City': 'Seattle' },
        { 'EmployeeID': 9, 'FirstName': 'Anne', 'City': 'London' }]
        this.multicolumncolset = {
            stringFormat: '{0}  ({2}) ({1})',
            enable: true,
            showHeader: true,
            columns: [
                {
                    field: 'FirstName',
                    headerText: 'FirstName'
                },
                {
                    field: 'EmployeeID',
                    headerText: 'EmployeeID'
                },
                {
                    field: 'City',
                    headerText: 'City'
                }
            ]
        };
        this.multicolumnfields = { key: 'EmployeeID', text: 'FirstName' };

    }

multiColumnSettings.enable boolean

Allow list of data to be displayed in several columns.

Default Value:

• false

Example

HTML

<input type="text" id="automulticolumn" ej-autocomplete [dataSource]="multicolumndataList" fields="multicolumnfields" [multiColumnSettings]="multicolumncolset" width="300px"/>

TS

multicolumndataList: Array<any>;
    multicolumncolset: Object;
    multicolumnfields: Object;
    value: string;
    constructor() {
        this.multicolumndataList = [{ 'EmployeeID': 1, 'FirstName': 'Nancy', 'City': 'Seattle' },
        { 'EmployeeID': 2, 'FirstName': 'Andrew', 'City': 'Tacoma' },
        { 'EmployeeID': 3, 'FirstName': 'Janet', 'City': 'Kirkland' },
        { 'EmployeeID': 4, 'FirstName': 'Margaret', 'City': 'Redmond' },
        { 'EmployeeID': 5, 'FirstName': 'Steven', 'City': 'London' },
        { 'EmployeeID': 6, 'FirstName': 'Michael', 'City': 'London' },
        { 'EmployeeID': 7, 'FirstName': 'Robert', 'City': 'London' },
        { 'EmployeeID': 8, 'FirstName': 'Laura', 'City': 'Seattle' },
        { 'EmployeeID': 9, 'FirstName': 'Anne', 'City': 'London' }]
        this.multicolumncolset = {
            stringFormat: '{0}  ({2}) ({1})',
            enable: true,
            showHeader: true,
            columns: [
                {
                    field: 'FirstName',
                    headerText: 'FirstName'
                },
                {
                    field: 'EmployeeID',
                    headerText: 'EmployeeID'
                },
                {
                    field: 'City',
                    headerText: 'City'
                }
            ]
        };
        this.multicolumnfields = { key: 'EmployeeID', text: 'FirstName' };

    }

multiColumnSettings.showHeader boolean

Allow header text to be displayed in corresponding columns.

Default Value:

• true

Example

HTML

<input type="text" id="automulticolumn" ej-autocomplete [dataSource]="multicolumndataList" fields="multicolumnfields" [multiColumnSettings]="multicolumncolset" width="300px"/>

TS

multicolumndataList: Array<any>;
    multicolumncolset: Object;
    multicolumnfields: Object;
    value: string;
    constructor() {
        this.multicolumndataList = [{ 'EmployeeID': 1, 'FirstName': 'Nancy', 'City': 'Seattle' },
        { 'EmployeeID': 2, 'FirstName': 'Andrew', 'City': 'Tacoma' },
        { 'EmployeeID': 3, 'FirstName': 'Janet', 'City': 'Kirkland' },
        { 'EmployeeID': 4, 'FirstName': 'Margaret', 'City': 'Redmond' },
        { 'EmployeeID': 5, 'FirstName': 'Steven', 'City': 'London' },
        { 'EmployeeID': 6, 'FirstName': 'Michael', 'City': 'London' },
        { 'EmployeeID': 7, 'FirstName': 'Robert', 'City': 'London' },
        { 'EmployeeID': 8, 'FirstName': 'Laura', 'City': 'Seattle' },
        { 'EmployeeID': 9, 'FirstName': 'Anne', 'City': 'London' }]
        this.multicolumncolset = {
            stringFormat: '{0}  ({2}) ({1})',
            enable: true,
            showHeader: true,
            columns: [
                {
                    field: 'FirstName',
                    headerText: 'FirstName'
                },
                {
                    field: 'EmployeeID',
                    headerText: 'EmployeeID'
                },
                {
                    field: 'City',
                    headerText: 'City'
                }
            ]
        };
        this.multicolumnfields = { key: 'EmployeeID', text: 'FirstName' };

    }

multiColumnSettings.stringFormat string

Displayed selected value and autocomplete search based on mentioned column value specified in that format.

NOTE

stringFormat as “{0} ({1}) ({2})” means search based on 0, 1 and 2 columns data.

Example

HTML

<input type="text" id="automulticolumn" ej-autocomplete [dataSource]="multicolumndataList" fields="multicolumnfields" [multiColumnSettings]="multicolumncolset" width="300px"/>

TS

multicolumndataList: Array<any>;
    multicolumncolset: Object;
    multicolumnfields: Object;
    value: string;
    constructor() {
        this.multicolumndataList = [{ 'EmployeeID': 1, 'FirstName': 'Nancy', 'City': 'Seattle' },
        { 'EmployeeID': 2, 'FirstName': 'Andrew', 'City': 'Tacoma' },
        { 'EmployeeID': 3, 'FirstName': 'Janet', 'City': 'Kirkland' },
        { 'EmployeeID': 4, 'FirstName': 'Margaret', 'City': 'Redmond' },
        { 'EmployeeID': 5, 'FirstName': 'Steven', 'City': 'London' },
        { 'EmployeeID': 6, 'FirstName': 'Michael', 'City': 'London' },
        { 'EmployeeID': 7, 'FirstName': 'Robert', 'City': 'London' },
        { 'EmployeeID': 8, 'FirstName': 'Laura', 'City': 'Seattle' },
        { 'EmployeeID': 9, 'FirstName': 'Anne', 'City': 'London' }]
        this.multicolumncolset = {
            stringFormat: '{0}  ({2}) ({1})',
            enable: true,
            showHeader: true,
            columns: [
                {
                    field: 'FirstName',
                    headerText: 'FirstName'
                },
                {
                    field: 'EmployeeID',
                    headerText: 'EmployeeID'
                },
                {
                    field: 'City',
                    headerText: 'City'
                }
            ]
        };
        this.multicolumnfields = { key: 'EmployeeID', text: 'FirstName' };

    }

multiColumnSettings.columns Array

Field and Header Text collections can be defined and customized through columns field.

Example

HTML

<input type="text" id="automulticolumn" ej-autocomplete [dataSource]="multicolumndataList" fields="multicolumnfields" [multiColumnSettings]="multicolumncolset" width="300px"/>

TS

multicolumndataList: Array<any>;
    multicolumncolset: Object;
    multicolumnfields: Object;
    value: string;
    constructor() {
        this.multicolumndataList = [{ 'EmployeeID': 1, 'FirstName': 'Nancy', 'City': 'Seattle' },
        { 'EmployeeID': 2, 'FirstName': 'Andrew', 'City': 'Tacoma' },
        { 'EmployeeID': 3, 'FirstName': 'Janet', 'City': 'Kirkland' },
        { 'EmployeeID': 4, 'FirstName': 'Margaret', 'City': 'Redmond' },
        { 'EmployeeID': 5, 'FirstName': 'Steven', 'City': 'London' },
        { 'EmployeeID': 6, 'FirstName': 'Michael', 'City': 'London' },
        { 'EmployeeID': 7, 'FirstName': 'Robert', 'City': 'London' },
        { 'EmployeeID': 8, 'FirstName': 'Laura', 'City': 'Seattle' },
        { 'EmployeeID': 9, 'FirstName': 'Anne', 'City': 'London' }]
        this.multicolumncolset = {
            enable: true,
            columns: [
                {
                    field: 'FirstName',
                    headerText: 'FirstName'
                },
                {
                    field: 'EmployeeID',
                    headerText: 'EmployeeID'
                },
                {
                    field: 'City',
                    headerText: 'City'
                }
            ]
        };
        this.multicolumnfields = { key: 'EmployeeID', text: 'FirstName' };

    }

multiColumnSettings.columns.field string

Get or set a value that indicates to display the columns in the autocomplete mapping with column name of the dataSource.

Example

HTML

<input type="text" id="automulticolumn" ej-autocomplete [dataSource]="multicolumndataList" fields="multicolumnfields" [multiColumnSettings]="multicolumncolset" width="300px"/>

TS

multicolumndataList: Array<any>;
    multicolumncolset: Object;
    multicolumnfields: Object;
    value: string;
    constructor() {
        this.multicolumndataList = [{ 'EmployeeID': 1, 'FirstName': 'Nancy', 'City': 'Seattle' },
        { 'EmployeeID': 2, 'FirstName': 'Andrew', 'City': 'Tacoma' },
        { 'EmployeeID': 3, 'FirstName': 'Janet', 'City': 'Kirkland' },
        { 'EmployeeID': 4, 'FirstName': 'Margaret', 'City': 'Redmond' },
        { 'EmployeeID': 5, 'FirstName': 'Steven', 'City': 'London' },
        { 'EmployeeID': 6, 'FirstName': 'Michael', 'City': 'London' },
        { 'EmployeeID': 7, 'FirstName': 'Robert', 'City': 'London' },
        { 'EmployeeID': 8, 'FirstName': 'Laura', 'City': 'Seattle' },
        { 'EmployeeID': 9, 'FirstName': 'Anne', 'City': 'London' }]
        this.multicolumncolset = {
            stringFormat: '{0}  ({2}) ({1})',
            enable: true,
            columns: [
                {
                    field: 'FirstName'
                },
                {
                    field: 'EmployeeID'
                },
                {
                    field: 'City'
                }
            ]
        };
        this.multicolumnfields = { key: 'EmployeeID', text: 'FirstName' };

    }

multiColumnSettings.columns.headerText string

Get or set a value that indicates to display the title of that particular column.

Example

HTML

<input type="text" id="automulticolumn" ej-autocomplete [dataSource]="multicolumndataList" fields="multicolumnfields" [multiColumnSettings]="multicolumncolset" width="300px"/>

TS

multicolumndataList: Array<any>;
    multicolumncolset: Object;
    multicolumnfields: Object;
    value: string;
    constructor() {
        this.multicolumndataList = [{ 'EmployeeID': 1, 'FirstName': 'Nancy', 'City': 'Seattle' },
        { 'EmployeeID': 2, 'FirstName': 'Andrew', 'City': 'Tacoma' },
        { 'EmployeeID': 3, 'FirstName': 'Janet', 'City': 'Kirkland' },
        { 'EmployeeID': 4, 'FirstName': 'Margaret', 'City': 'Redmond' },
        { 'EmployeeID': 5, 'FirstName': 'Steven', 'City': 'London' },
        { 'EmployeeID': 6, 'FirstName': 'Michael', 'City': 'London' },
        { 'EmployeeID': 7, 'FirstName': 'Robert', 'City': 'London' },
        { 'EmployeeID': 8, 'FirstName': 'Laura', 'City': 'Seattle' },
        { 'EmployeeID': 9, 'FirstName': 'Anne', 'City': 'London' }]
        this.multicolumncolset = {
            stringFormat: '{0}  ({2}) ({1})',
            enable: true,
            showHeader: true,
            columns: [
                {
                    field: 'FirstName',
                    headerText: 'FirstName'
                },
                {
                    field: 'EmployeeID',
                    headerText: 'EmployeeID'
                },
                {
                    field: 'City',
                    headerText: 'City'
                }
            ]
        };
        this.multicolumnfields = { key: 'EmployeeID', text: 'FirstName' };

    }

multiColumnSettings.columns.cssClass string

Gets or sets a value that indicates to render the multicolumn with custom theme.

Default Value:

• ””

Example

HTML

<input type="text" id="automulticolumn" ej-autocomplete [dataSource]="multicolumndataList" fields="multicolumnfields" [multiColumnSettings]="multicolumncolset" width="300px"/>

TS

multicolumndataList: Array<any>;
    multicolumncolset: Object;
    multicolumnfields: Object;
    value: string;
    constructor() {
        this.multicolumndataList = [{ 'EmployeeID': 1, 'FirstName': 'Nancy', 'City': 'Seattle' },
        { 'EmployeeID': 2, 'FirstName': 'Andrew', 'City': 'Tacoma' },
        { 'EmployeeID': 3, 'FirstName': 'Janet', 'City': 'Kirkland' },
        { 'EmployeeID': 4, 'FirstName': 'Margaret', 'City': 'Redmond' },
        { 'EmployeeID': 5, 'FirstName': 'Steven', 'City': 'London' },
        { 'EmployeeID': 6, 'FirstName': 'Michael', 'City': 'London' },
        { 'EmployeeID': 7, 'FirstName': 'Robert', 'City': 'London' },
        { 'EmployeeID': 8, 'FirstName': 'Laura', 'City': 'Seattle' },
        { 'EmployeeID': 9, 'FirstName': 'Anne', 'City': 'London' }]
        this.multicolumncolset = {
            enable: true,
            columns: [
                {
                    field: 'FirstName',
                    headerText: 'FirstName',
                    cssClass: 'importClass'
                },
                {
                    field: 'EmployeeID',
                    headerText: 'EmployeeID',
                    cssClass: 'alterClass'
                },
                {
                    field: 'City',
                    headerText: 'City',
                    cssClass: 'importClass'
                }
            ]
        };
        this.multicolumnfields = { key: 'EmployeeID', text: 'FirstName' };

    }

multiColumnSettings.columns.type enum

Specifies the search data type. There are four types of data types available such as string, ‘number’, ‘boolean’ and ‘date’.

Default Value:

• ej.Type.String

Column type	Data type
number	ej.Type.Number
string	ej.Type.String
boolean	ej.Type.Boolean
Date	ej.Type.Date

Example

HTML

<input type="text" id="automulticolumn" ej-autocomplete [dataSource]="multicolumndataList" fields="multicolumnfields" [multiColumnSettings]="multicolumncolset" width="300px"/>

TS

multicolumndataList: Array<any>;
    multicolumncolset: Object;
    multicolumnfields: Object;
    value: string;
    constructor() {
        this.multicolumndataList = [{ 'EmployeeID': 1, 'FirstName': 'Nancy', 'City': 'Seattle' },
        { 'EmployeeID': 2, 'FirstName': 'Andrew', 'City': 'Tacoma' },
        { 'EmployeeID': 3, 'FirstName': 'Janet', 'City': 'Kirkland' },
        { 'EmployeeID': 4, 'FirstName': 'Margaret', 'City': 'Redmond' },
        { 'EmployeeID': 5, 'FirstName': 'Steven', 'City': 'London' },
        { 'EmployeeID': 6, 'FirstName': 'Michael', 'City': 'London' },
        { 'EmployeeID': 7, 'FirstName': 'Robert', 'City': 'London' },
        { 'EmployeeID': 8, 'FirstName': 'Laura', 'City': 'Seattle' },
        { 'EmployeeID': 9, 'FirstName': 'Anne', 'City': 'London' }]
        this.multicolumncolset = {
            stringFormat: '{0}  ({2}) ({1})',
            enable: true,
            showHeader: true,
            columns: [
                {
                    field: 'FirstName',
                    headerText: 'FirstName'
                },
                {
                    field: 'EmployeeID',
                    headerText: 'EmployeeID',
                    type: ej.Type.Number
                },
                {
                    field: 'City',
                    headerText: 'City'
                }
            ]
        };
        this.multicolumnfields = { key: 'EmployeeID', text: 'FirstName' };

    }

multiColumnSettings.columns.filterType enum

Specifies the search filter type. There are several types of search filter available such as ‘startswith’, ‘contains’, ‘endswith’, ‘lessthan’, ‘lessthanorequal’, ‘greaterthan’, ‘greaterthanorequal’, ‘equal’, ‘notequal’.

Default Value:

• ej.filterType.StartsWith

Column type	Filter type
number	ej.filterType.GreaterThan ej.filterType.GreaterThanOrEqual ej.filterType.LessThan ej.filterType.LessThanOrEqual ej.filterType.Equal
string	ej.filterType.StartsWith ej.filterType.EndsWith ej.filterType.Contains ej.filterType.Equal ej.filterType.NotEqual
boolean	ej.filterType.Equal ej.filterType.NotEqual
Date	ej.filterType.GreaterThan ej.filterType.GreaterThanOrEqual ej.filterType.LessThan ej.filterType.LessThanOrEqual ej.filterType.Equal

Example

HTML

<input type="text" id="automulticolumn" ej-autocomplete [dataSource]="multicolumndataList" fields="multicolumnfields" [multiColumnSettings]="multicolumncolset" width="300px"/>

TS

multicolumndataList: Array<any>;
    multicolumncolset: Object;
    multicolumnfields: Object;
    value: string;
    constructor() {
        this.multicolumndataList = [{ 'EmployeeID': 1, 'FirstName': 'Nancy', 'City': 'Seattle' },
        { 'EmployeeID': 2, 'FirstName': 'Andrew', 'City': 'Tacoma' },
        { 'EmployeeID': 3, 'FirstName': 'Janet', 'City': 'Kirkland' },
        { 'EmployeeID': 4, 'FirstName': 'Margaret', 'City': 'Redmond' },
        { 'EmployeeID': 5, 'FirstName': 'Steven', 'City': 'London' },
        { 'EmployeeID': 6, 'FirstName': 'Michael', 'City': 'London' },
        { 'EmployeeID': 7, 'FirstName': 'Robert', 'City': 'London' },
        { 'EmployeeID': 8, 'FirstName': 'Laura', 'City': 'Seattle' },
        { 'EmployeeID': 9, 'FirstName': 'Anne', 'City': 'London' }]
        this.multicolumncolset = {
            stringFormat: '{0}  ({2}) ({1})',
            enable: true,
            showHeader: true,
            columns: [
                {
                    field: 'FirstName',
                    headerText: 'FirstName'
                },
                {
                    field: 'EmployeeID',
                    headerText: 'EmployeeID',
                    type: ej.Type.Number,
                    filterType: ej.filterType.GreaterThan
                },
                {
                    field: 'City',
                    headerText: 'City',
                    type: ej.Type.String,
                    filterType: ej.filterType.Contains
                }
            ]
        };
        this.multicolumnfields = { key: 'EmployeeID', text: 'FirstName' };

    }

multiColumnSettings.columns.headerTextAlign enum

This defines the text alignment of a particular column header cell value. See headerTextAlign

Default Value:

• ej.TextAlign.Left

Add a comment to this line

Name	Description
Center	Header text is centered.
Justify	Header text is justified.
Left	Header text is aligned to the left.
Right	Header text is aligned to the right.

Example

HTML

<input type="text" id="automulticolumn" ej-autocomplete [dataSource]="multicolumndataList" fields="multicolumnfields" [multiColumnSettings]="multicolumncolset" width="300px"/>

TS

multicolumndataList: Array<any>;
    multicolumncolset: Object;
    multicolumnfields: Object;
    value: string;
    constructor() {
        this.multicolumndataList = [{ 'EmployeeID': 1, 'FirstName': 'Nancy', 'City': 'Seattle' },
        { 'EmployeeID': 2, 'FirstName': 'Andrew', 'City': 'Tacoma' },
        { 'EmployeeID': 3, 'FirstName': 'Janet', 'City': 'Kirkland' },
        { 'EmployeeID': 4, 'FirstName': 'Margaret', 'City': 'Redmond' },
        { 'EmployeeID': 5, 'FirstName': 'Steven', 'City': 'London' },
        { 'EmployeeID': 6, 'FirstName': 'Michael', 'City': 'London' },
        { 'EmployeeID': 7, 'FirstName': 'Robert', 'City': 'London' },
        { 'EmployeeID': 8, 'FirstName': 'Laura', 'City': 'Seattle' },
        { 'EmployeeID': 9, 'FirstName': 'Anne', 'City': 'London' }]
        this.multicolumncolset = {
            stringFormat: '{0}  ({2}) ({1})',
            enable: true,
            showHeader: true,
            columns: [
                {
                    field: 'FirstName',
                    headerText: 'FirstName',
                    headerTextAlign: ej.TextAlign.Center
                },
                {
                    field: 'EmployeeID',
                    headerText: 'EmployeeID',
                    headerTextAlign: ej.TextAlign.Center
                },
                {
                    field: 'City',
                    headerText: 'City',
                    headerTextAlign: ej.TextAlign.Center
                }
            ]
        };
        this.multicolumnfields = { key: 'EmployeeID', text: 'FirstName' };

    }

multiColumnSettings.columns.textAlign enum

Gets or sets a value that indicates to align the text within the column. See textAlign

Default Value:

• ej.TextAlign.Left

Name	Description
Center	Text is centered.
Justify	Text is justified.
Left	Text is aligned to the left.
Right	Text is aligned to the right.

Example

HTML

<input type="text" id="automulticolumn" ej-autocomplete [dataSource]="multicolumndataList" fields="multicolumnfields" [multiColumnSettings]="multicolumncolset" width="300px"/>

TS

multicolumndataList: Array<any>;
    multicolumncolset: Object;
    multicolumnfields: Object;
    value: string;
    constructor() {
        this.multicolumndataList = [{ 'EmployeeID': 1, 'FirstName': 'Nancy', 'City': 'Seattle' },
        { 'EmployeeID': 2, 'FirstName': 'Andrew', 'City': 'Tacoma' },
        { 'EmployeeID': 3, 'FirstName': 'Janet', 'City': 'Kirkland' },
        { 'EmployeeID': 4, 'FirstName': 'Margaret', 'City': 'Redmond' },
        { 'EmployeeID': 5, 'FirstName': 'Steven', 'City': 'London' },
        { 'EmployeeID': 6, 'FirstName': 'Michael', 'City': 'London' },
        { 'EmployeeID': 7, 'FirstName': 'Robert', 'City': 'London' },
        { 'EmployeeID': 8, 'FirstName': 'Laura', 'City': 'Seattle' },
        { 'EmployeeID': 9, 'FirstName': 'Anne', 'City': 'London' }]
        this.multicolumncolset = {
            stringFormat: '{0}  ({2}) ({1})',
            enable: true,
            showHeader: true,
            columns: [
                {
                    field: 'FirstName',
                    textAlign: ej.TextAlign.Right
                },
                {
                    field: 'EmployeeID',
                    textAlign: ej.TextAlign.Right
                },
                {
                    field: 'City',
                    textAlign: ej.TextAlign.Right
                }
            ]
        };
        this.multicolumnfields = { key: 'EmployeeID', text: 'FirstName' };

    }

multiSelectMode enum

Enables or disables selecting multiple values from the suggestion list. Multiple values can be selected through either of the following options,

Name	Description
Delimiter	Multiple values are separated using a given special character.
VisualMode	Each values are displayed in separate box with close button.

See Also

MultiSelectMode

Default Value:

• ej.MultiSelectMode.None

Example

HTML

<input type="text" id="visualmode" ej-autocomplete width="100%" [multiSelectMode]="mode" watermarkText="Select skills" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
        this.mode = ej.MultiSelectMode.VisualMode;
    }

popupHeight string

The height of the suggestion list.

Default Value:

• “152px”

Example

HTML

<input type="text" id="visualmode" ej-autocomplete popupHeight="100px" [dataSource]="language" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }

popupWidth string

The width of the suggestion list.

Default Value:

• “auto”

Example

HTML

<input type="text" id="visualmode" ej-autocomplete popupHeight="200px" [dataSource]="language" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }

query ej.Query

The query to retrieve the data from the data source.

Default Value:

• null

Example

HTML

<input id="databindingremote" type="text" ej-autocomplete width="100%" [query]="query" [fields]="fields" watermarkText="Search a customer" [dataSource]="dataManger" />

TS

constructor() {
        this.fields = { text: 'ContactName', key: 'SupplierID' };
        this.dataManger = ej.DataManager({ url: 'http://js.syncfusion.com/ejServices/wcf/NorthWind.svc/', crossDomain: true }); // eslint-disable-line new-cap
        this.query = ej.Query().from('Suppliers').select('SupplierID', 'ContactName');
    }

readOnly boolean

Indicates that the autocomplete textbox values can only be readable.

Default Value:

• false

Example

HTML

<input type="text" id="visualmode" ej-autocomplete [dataSource]="language" [readOnly]="true" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }

selectValueByKey number

Sets the value for the Autocomplete textbox based on the given input key value.

Example

HTML

<input type="text" id="searchbox" ej-autocomplete width="100%" [dataSource]="states" [fields]="fields" selectValueByKey="s5" />

TS

constructor() {
        this.fields = { key: 'index', text: 'countryName' };
        this.states = [
            { index: 's1', countryName: 'Alabama' }, { index: 's2', countryName: 'Alaska' },
            { index: 's3', countryName: 'Arizona' }, { index: 's4', countryName: 'Arkansas' },
            { index: 's5', countryName: 'California' }, { index: 's6', countryName: 'Colorado' },
            { index: 's20', countryName: 'Maryland' }, { index: 's21', countryName: 'Massachusetts' },
            { index: 's22', countryName: 'Michigan' }, { index: 's23', countryName: 'Montana' },
            { index: 's24', countryName: 'New Mexico' }, { index: '25', countryName: 'New York' },
            { index: '26', countryName: 'North Carolina' }, { index: 's27', countryName: 'Nevada' },
            { index: 's39', countryName: 'Vermont' }, { index: 's40', countryName: 'Virginia' },
            { index: 's41', countryName: 'Washington' }, { index: 's42', countryName: 'West Virginia' },
            { index: 's43', countryName: 'Wisconsin' }, { index: 's44', countryName: 'Wyoming' }
        ];

    }

showEmptyResultText boolean

Enables or disables showing the message when there are no suggestions for the entered text.

Default Value:

• true

Example

HTML

<input type="text" id="visualmode" ej-autocomplete [dataSource]="language" [showEmptyResult]="false" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }

showLoadingIcon boolean

Enables or disables the loading icon to intimate the searching operation. The loading icon is visible when there is a time delay to perform the search.

Default Value:

• true

Example

HTML

<input id="databindingremote" type="text" ej-autocomplete width="100%" [query]="query" [fields]="fields" watermarkText="Search a customer" [dataSource]="dataManger" [showLoadingIcon]="false" />

TS

constructor() {
        this.fields = { text: 'ContactName', key: 'SupplierID' };
        this.dataManger = ej.DataManager({ url: 'http://js.syncfusion.com/ejServices/wcf/NorthWind.svc/', crossDomain: true }); // eslint-disable-line new-cap
        this.query = ej.Query().from('Suppliers').select('SupplierID', 'ContactName');
    }

showPopupButton boolean

Enables the showPopup button in autocomplete textbox. When the showPopup button is clicked, it displays all the available data from the data source.

Default Value:

• false

Example

HTML

<input type="text" id="visualmode" ej-autocomplete [dataSource]="language" [showPopupButton]="true" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }

showRoundedCorner boolean

Enables or disables rounded corner.

Default Value:

• false

Example

HTML

<input type="text" id="visualmode" ej-autocomplete [dataSource]="language" [showRoundedCorner]="true" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }

showResetIcon boolean

Enables or disables reset icon to clear the textbox values.

Default Value:

• false

Example

HTML

<input type="text" id="visualmode" ej-autocomplete [dataSource]="language" [showResetIcon]="true" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }

sortOrder enum

Sort order specifies whether the suggestion list values has to be displayed in ascending or descending order.

Name	Description
Ascending	Items to be displayed in the suggestion list in ascending order.
Descending	Items to be displayed in the suggestion list in descending order.

See Also

 SortOrder

Default Value:

• ej.SortOrder.Ascending

Example

HTML

<input type="text" id="visualmode" ej-autocomplete [dataSource]="language" sortOrder="descending" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }

template string

The template to display the suggestion list items with customized appearance.

Default Value:

• null

Example

HTML

<input type="text" id="selectcountry" ej-autocomplete [dataSource]="countries" [template]="template" />

TS

constructor() {
        this.template = '<div class="flag ${sprite}"> </div><div class="txt"> ${text} </div>';
        this.countries = [
            { text: 'Algeria', sprite: 'flag-dz' }, { text: 'Argentina', sprite: 'flag-ar' },
            { text: 'Armenia', sprite: 'flag-am' }, { text: 'Brazil', sprite: 'flag-br' },
            { text: 'Bangladesh', sprite: 'flag-bd' }, { text: 'Canada', sprite: 'flag-ca' },
            { text: 'Cuba', sprite: 'flag-cu' }, { text: 'China', sprite: 'flag-cn' },
            { text: 'Denmark', sprite: 'flag-dk' }, { text: 'Estonia', sprite: 'flag-ee' }
        ];
    }

validationMessage Object

The jQuery validation error message to be displayed on form validation.

Default Value:

• null

Example

HTML

<input type="text" id="visualmode" ej-autocomplete [dataSource]="language" [validationRules]="Rules" [validationMessage]="msg" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
        this.Rules: [{ 



required: true 


}] 


this.msg: [{ 



required: "Enter some value" 


}]
    }

validationRules Object

The jQuery validation rules for form validation.

Default Value:

• null

Example

VALIDATIONRULES

HTML

<input type="text" id="visualmode" ej-autocomplete [dataSource]="language" [validationRules]="Rules" [validationMessage]="msg" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
       this.Rules: [{ 



required: true 


}] 


this.msg: [{ 



required: "Enter some value" 


}]
    }

value string

The value to be displayed in the autocomplete textbox.

Default Value:

• null

Example

HTML

<input type="text" id="visualmode" ej-autocomplete [dataSource]="language" [value]="value" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
        this.value = "Perl"
    }

visible boolean

Enables or disables the visibility of the autocomplete textbox.

Default Value:

• true

Example

HTML

<input type="text" id="visualmode" ej-autocomplete [dataSource]="language" [visible]="true" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }

watermarkText string

The text to be displayed when the value of the autocomplete textbox is empty.

Default Value:

• null

Example

HTML

<input type="text" id="visualmode" ej-autocomplete watermarkText="Select skills" [dataSource]="language" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }

width string|number

The width of the Autocomplete textbox.

Default Value:

• null

Example

HTML

<input type="text" id="visualmode" ej-autocomplete width="100%" [dataSource]="language" />

TS

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }

Methods

clearText()

Clears the text in the Autocomplete textbox.

NOTE

This method does not accept any arguments.

Example

HTML

<input type="text" id="autocompletecomp" ej-autocomplete />

TS

let acObj = $('#autocompletecomp').data('ejAutocomplete');
    acObj.clearText();

destroy()

Destroys the Autocomplete widget.

NOTE

This method does not accept any arguments.

Example

HTML

<input type="text" id="autocompletecomp" ej-autocomplete />

TS

let acObj = $('#autocompletecomp').data('ejAutocomplete');
    acObj.destroy();

disable()

Disables the autocomplete widget.

NOTE

This method does not accept any arguments.

Example

HTML

<input type="text" id="autocompletecomp" ej-autocomplete />

TS

let acObj = $('#autocompletecomp').data('ejAutocomplete');
    acObj.disable();

enable()

Enables the autocomplete widget.

NOTE

This method does not accept any arguments.

Example

HTML

<input type="text" id="autocompletecomp" ej-autocomplete />

TS

let acObj = $('#autocompletecomp').data('ejAutocomplete');
    acObj.enable();

getSelectedItems()

Returns objects (data object) of all the selected items in the autocomplete textbox.

NOTE

This method does not accept any arguments.

Returns: object

Example

HTML

<input type="text" id="autocompletecomp" ej-autocomplete />

TS

let acObj = $('#autocompletecomp').data('ejAutocomplete');
    acObj.getSelectedItems();

getValue()

Returns the current selected value from the Autocomplete textbox.

NOTE

This method does not accept any arguments.

Returns: string

Example

HTML

<input type="text" id="autocompletecomp" ej-autocomplete />

TS

let acObj = $('#autocompletecomp').data('ejAutocomplete');
    acObj.getValue();

getActiveText()

Returns the current active text value in the Autocomplete suggestion list.

NOTE

This method does not accept any arguments.

Returns: string

Example

HTML

<input type="text" id="autocompletecomp" ej-autocomplete />

TS

let acObj = $('#autocompletecomp').data('ejAutocomplete');
    acObj.getActiveText();

search()

Search the entered text and show it in the suggestion list if available.

NOTE

This method does not accept any arguments.

Example

HTML

<input type="text" id="autocompletecomp" ej-autocomplete />

TS

let acObj = $('#autocompletecomp').data('ejAutocomplete');
    acObj.search();

open()

Open up the autocomplete suggestion popup with all list items.

NOTE

This method does not accept any arguments.

Example

HTML

<input type="text" id="autocompletecomp" ej-autocomplete />

TS

let acObj = $('#autocompletecomp').data('ejAutocomplete');
    acObj.open();

selectValueByKey(key)

Sets the value of the Autocomplete textbox based on the given key value.

Name	Type	Description
Key	string	The key value of the specific suggestion item.

NOTE

This method accepts string as an argument.

Example

HTML

<input type="text" id="autocompletecomp" ej-autocomplete />

TS

let acObj = $('#autocompletecomp').data('ejAutocomplete');
    acObj.selectValueByKey("key value");

selectValueByText(text)

Sets the value of the Autocomplete textbox based on the given input text value.

Name	Type	Description
Text	string	The text (label) value of the specific suggestion item.

Example

HTML

<input type="text" id="autocompletecomp" ej-autocomplete />

TS

let acObj = $('#autocompletecomp').data('ejAutocomplete');
    acObj.selectValueByText("text");

Events

actionBegin

Triggers when the AJAX requests Begins.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the Autocomplete model
type	string	returns the name of the event

NOTE

It internally uses jQuery ajaxStart event. For details refer here.

Example

HTML

<input id="databindingremote" type="text" ej-autocomplete width="100%" [query]="query" [fields]="fields" watermarkText="Search a customer" [dataSource]="dataManger" (actionBegin)="actionbegin(args)" />

TS

constructor() {
        this.fields = { text: 'ContactName', key: 'SupplierID' };
        this.dataManger = ej.DataManager({ url: 'http://js.syncfusion.com/ejServices/wcf/NorthWind.svc/', crossDomain: true }); // eslint-disable-line new-cap
        this.query = ej.Query().from('Suppliers').select('SupplierID', 'ContactName');

    }
    actionbegin(args) {
        // Your code here
    }

actionSuccess

Triggers when the data requested from AJAX will get successfully loaded in the Autocomplete widget.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
count	number	Returns number of times trying to fetch the data
model	object	returns the Autocomplete model
query	object	Returns the query for data retrieval
request	object	Returns the query for data retrieval from the Database
type	string	returns the name of the event
result	array	Returns the number of items fetched from remote data
xhr	object	Returns the requested data

NOTE

It internally uses jQuery ajaxSuccess event. For details refer here.

Example

HTML

<input id="databindingremote" type="text" ej-autocomplete width="100%" [query]="query" [fields]="fields" watermarkText="Search a customer" [dataSource]="dataManger" (actionSuccess)="actionsuccess(args)" />

TS

constructor() {
        this.fields = { text: 'ContactName', key: 'SupplierID' };
        this.dataManger = ej.DataManager({ url: 'http://js.syncfusion.com/ejServices/wcf/NorthWind.svc/', crossDomain: true }); // eslint-disable-line new-cap
        this.query = ej.Query().from('Suppliers').select('SupplierID', 'ContactName');

    }
    actionsuccess(args) {
        // Your code here
    }

actionComplete

Triggers when the AJAX requests complete. The request may get failed or succeed.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
count	number	Returns number of times trying to fetch the data
model	object	returns the Autocomplete model
query	object	Returns the query for data retrieval
request	object	Returns the query for data retrieval from the Database
type	string	returns the name of the event
result	array	Returns the number of items fetched from remote data
xhr	object	Returns the requested data

NOTE

It internally uses jQuery ajaxComplete event. For details refer here.

Example

HTML

<input id="databindingremote" type="text" ej-autocomplete width="100%" [query]="query" [fields]="fields" watermarkText="Search a customer" [dataSource]="dataManger" (actionComplete)="actioncomplete(args)" />

TS

constructor() {
        this.fields = { text: 'ContactName', key: 'SupplierID' };
        this.dataManger = ej.DataManager({ url: 'http://js.syncfusion.com/ejServices/wcf/NorthWind.svc/', crossDomain: true }); // eslint-disable-line new-cap
        this.query = ej.Query().from('Suppliers').select('SupplierID', 'ContactName');

    }
    actioncomplete(args) {
        // Your code here
    }

actionFailure

Triggers when the data requested from AJAX get failed.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
error	object	Returns the error message
model	object	returns the Autocomplete model
query	object	Returns the query for data retrieval
type	string	returns the name of the event

NOTE

It internally uses jQuery ajaxError event. For details refer here.

Example

HTML

<input id="databindingremote" type="text" ej-autocomplete width="100%" [query]="query" [fields]="fields" watermarkText="Search a customer" [dataSource]="dataManger" (actionFailure)="actionfailure(args)" />

TS

constructor() {
        this.fields = { text: 'ContactName', key: 'SupplierID' };
        this.dataManger = ej.DataManager({ url: 'http://js.syncfusion.com/ejServices/wcf/NorthWind.svc/ds', crossDomain: true }); // eslint-disable-line new-cap
        this.query = ej.Query().from('Suppliers').select('SupplierID', 'ContactName');

    }
    actionfailure(args) {
        // Your code here
    }

change

Triggers when the text box value is changed.

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the autocomplete model object.
type	string	Name of the event.
value	string	Value of the autocomplete textbox.

Example

HTML

<input id="databindingremote" type="text" ej-autocomplete width="100%" [query]="query" [fields]="fields" watermarkText="Search a customer" [dataSource]="dataManger" (ejchange)="onchange(args)" />

TS

constructor() {
        this.fields = { text: 'ContactName', key: 'SupplierID' };
        this.dataManger = ej.DataManager({ url: 'http://js.syncfusion.com/ejServices/wcf/NorthWind.svc/', crossDomain: true }); // eslint-disable-line new-cap
        this.query = ej.Query().from('Suppliers').select('SupplierID', 'ContactName');

    }
    onchange(args) {
        // Your code here
    }

close

Triggers after the suggestion popup is closed.

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the autocomplete model object.
type	string	Name of the event.

Example

HTML

<input id="databindingremote" type="text" ej-autocomplete width="100%" [query]="query" [fields]="fields" watermarkText="Search a customer" [dataSource]="dataManger" (close)="onclose(args)" />

TS

constructor() {
        this.fields = { text: 'ContactName', key: 'SupplierID' };
        this.dataManger = ej.DataManager({ url: 'http://js.syncfusion.com/ejServices/wcf/NorthWind.svc/', crossDomain: true }); // eslint-disable-line new-cap
        this.query = ej.Query().from('Suppliers').select('SupplierID', 'ContactName');

    }
    onclose(args) {
        // Your code here
    }

create

Triggers when Autocomplete widget is created.

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the autocomplete model object.
type	string	Name of the event.

Example

HTML

<input id="databindingremote" type="text" ej-autocomplete width="100%" [query]="query" [fields]="fields" watermarkText="Search a customer" [dataSource]="dataManger" (create)="oncreate(args)" />

TS

constructor() {
        this.fields = { text: 'ContactName', key: 'SupplierID' };
        this.dataManger = ej.DataManager({ url: 'http://js.syncfusion.com/ejServices/wcf/NorthWind.svc/', crossDomain: true }); // eslint-disable-line new-cap
        this.query = ej.Query().from('Suppliers').select('SupplierID', 'ContactName');

    }
    oncreate(args) {
        // Your code here
    }

destroy

Triggers after the Autocomplete widget is destroyed.

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the autocomplete model object.
type	string	Name of the event.

Example

HTML

<input id="databindingremote" type="text" ej-autocomplete width="100%" [query]="query" [fields]="fields" watermarkText="Search a customer" [dataSource]="dataManger" (destroy)="ondestroy(args)" />

TS

constructor() {
        this.fields = { text: 'ContactName', key: 'SupplierID' };
        this.dataManger = ej.DataManager({ url: 'http://js.syncfusion.com/ejServices/wcf/NorthWind.svc/', crossDomain: true }); // eslint-disable-line new-cap
        this.query = ej.Query().from('Suppliers').select('SupplierID', 'ContactName');

    }
    ondestroy(args) {
        // Your code here
    }

focusIn

Triggers after the autocomplete textbox is focused.

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the autocomplete model object.
type	string	Name of the event.
value	string	Value of the autocomplete textbox.

Example

HTML

<input id="databindingremote" type="text" ej-autocomplete width="100%" [query]="query" [fields]="fields" watermarkText="Search a customer" [dataSource]="dataManger" (focusIn)="onfocusin(args)" />

TS

constructor() {
        this.fields = { text: 'ContactName', key: 'SupplierID' };
        this.dataManger = ej.DataManager({ url: 'http://js.syncfusion.com/ejServices/wcf/NorthWind.svc/', crossDomain: true }); // eslint-disable-line new-cap
        this.query = ej.Query().from('Suppliers').select('SupplierID', 'ContactName');

    }
    onfocusin(args) {
        // Your code here
    }

focusOut

Triggers after the Autocomplete textbox gets out of the focus.

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the autocomplete model object.
type	string	Name of the event.
value	string	Value of the autocomplete textbox.

Example

HTML

<input id="databindingremote" type="text" ej-autocomplete width="100%" [query]="query" [fields]="fields" watermarkText="Search a customer" [dataSource]="dataManger" (focusOut)="onfocusout(args)" />

TS

constructor() {
        this.fields = { text: 'ContactName', key: 'SupplierID' };
        this.dataManger = ej.DataManager({ url: 'http://js.syncfusion.com/ejServices/wcf/NorthWind.svc/', crossDomain: true }); // eslint-disable-line new-cap
        this.query = ej.Query().from('Suppliers').select('SupplierID', 'ContactName');

    }
    onfocusout(args) {
        // Your code here
    }

open

Triggers after the suggestion list is opened.

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the autocomplete model object.
type	string	Name of the event.

Example

HTML

<input id="databindingremote" type="text" ej-autocomplete width="100%" [query]="query" [fields]="fields" watermarkText="Search a customer" [dataSource]="dataManger" (open)="onopen(args)" />

TS

constructor() {
        this.fields = { text: 'ContactName', key: 'SupplierID' };
        this.dataManger = ej.DataManager({ url: 'http://js.syncfusion.com/ejServices/wcf/NorthWind.svc/', crossDomain: true }); // eslint-disable-line new-cap
        this.query = ej.Query().from('Suppliers').select('SupplierID', 'ContactName');

    }
    onopen(args) {
        // Your code here
    }

select

Triggers when an item has been selected from the suggestion list.

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the autocomplete model object.
type	string	Name of the event.
value	string	Value of the autocomplete textbox.
text	string	Text of the selected item.
key	string	Key of the selected item.
Item	Object	Data object of the selected item.

Example

HTML

<input id="databindingremote" type="text" ej-autocomplete width="100%" [query]="query" [fields]="fields" watermarkText="Search a customer" [dataSource]="dataManger" (select)="onselect(args)" />

TS

constructor() {
        this.fields = { text: 'ContactName', key: 'SupplierID' };
        this.dataManger = ej.DataManager({ url: 'http://js.syncfusion.com/ejServices/wcf/NorthWind.svc/', crossDomain: true }); // eslint-disable-line new-cap
        this.query = ej.Query().from('Suppliers').select('SupplierID', 'ContactName');

    }
    onselect(args) {
        // Your code here
    }