ejComboBox

17 Nov 201724 minutes to read

The ComboBox component allows the user to type a value or choose an option from the list of predefined options.

Requires

module:jQuery
module:ej.core.js
module:ej.data.js
module:ej.globalize.js
module:ej.combobox.js

Members

actionFailureTemplate `string`

Accepts the template and assigns it to the popup list content of the component when the data fetch request from the remote server fails.

Default Value:

“The Request Failed”

Example

HTML

<input type="text" id="visualmode" ej-combobox placeholder="Select skills" [dataSource]="language" actionFailureTemplate="Connection lost"/>

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', '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'];
    }

allowCustom `boolean`

Specifies whether the component allows user defined value which does not exist in data source.

Default Value:

true

Example

HTML

<input type="text" id="visualmode" ej-combobox placeholder="Select skills" [dataSource]="language" [allowCustom]="false"/>

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', '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'];
    }

allowFiltering `boolean`

When allowFiltering is set to true, show the filter bar (search box) of the component. The filter action retrieves matched items through the filtering event based on the characters typed in the search TextBox. If no match is found, the value of the noRecordsTemplate property will be displayed.

Default Value:

false

Example

HTML

<input type="text" id="visualmode" ej-combobox placeholder="Select skills" [dataSource]="language" [allowFiltering]="true"/>

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', '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'];
    }

autofill `boolean`

Specifies whether suggest a first matched item in input when searching. No action happens when no matches found.

Default Value:

false

Example

HTML

<input type="text" id="visualmode" ej-combobox placeholder="Select skills" [dataSource]="language" [autofill]="true"/>

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', '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`

Sets CSS classes to the root element of the component that helps customize the UI styles.

Default Value:

null

Example

HTML

<input type="text" id="visualmode" ej-combobox placeholder="Select skills" [dataSource]="language" cssClass="customCSS"/>

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', '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-ddl {
        background-color: azure;
        font-weight: 700;
    }

dataSource `Object|Array`

Accepts the list items either through local or remote service and binds it to the component. It can be an array of JSON objects or an instance of DataManager.

Default Value:

[]

Example

HTML

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

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', '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`

When set to true, enables RTL mode of the component that displays the content in the right-to-left direction.

Default Value:

false

Example

HTML

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

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', '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`

Specifies a value that indicates whether the component is enabled or not.

Default Value:

true

Example

HTML

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

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', '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`

The fields property maps the columns of the data table and binds the data to the component.

fields.groupBy `string`

Used to group the popup list items.

Default Value:

null

fields.iconCss `string`

Defines class for the item.

Default Value:

null

fields.value `string`

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

Default Value:

null

fields.text `string`

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

Default Value:

null

Example

HTML

<input type="text" id="searchbox" ej-combobox [dataSource]="states" [fields]="fields" />

constructor() {
        this.fields = { text: 'countryName' , value: 'index' };
        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' }
        ];

    }

footerTemplate `string`

Accepts the template design and assigns it to the footer container of the popup list.

Default Value:

null

Example

HTML

<input type="text" id="searchbox" ej-combobox [dataSource]="List" [fields]="fields" [headerTemplate]="headerTemplate" [itemTemplate]="itemTemplate" [footerTemplate]="footerTemplate"/>

constructor() {
        this.fields = { text: 'text', groupBy: 'country'};
        this.List = [
        { text: 'Architecture', image: '1', status: 'Available', country: 'USA'  },
        { text: 'Biographies', image: '2', status: 'Available', country: 'USA' },
        { text: 'Business', image: '3', status: 'Available', country: 'England' },
        { text: 'ComputerIT', image: '4', status: 'Available', country: 'England' },
        { text: "Comics", image: "5", status: "Available", country: 'USA' }
   		 ];
		this.headerTemplate= '<div class="head">  Photo  <span style="padding-left:42px"> Contact Info </span></div>';
        this.itemTemplate= '<div><img class="image" src="${image}.png" alt="employee"/>' +
            '<div class="ename"> ${text} </div><div class="temp"> ${country} </div></div>';
        this.footerTemplate= '<div class="Foot"> Total Items Count: 5 </div>';

    }

groupTemplate `string`

Accepts the template design and assigns it to the group headers present in the popup list.

Default Value:

null

Example

HTML

<input type="text" id="searchbox" ej-combobox [dataSource]="List" [fields]="fields" [groupTemplate]="groupTemplate"/>

constructor() {
        this.fields = { text: 'text', groupBy: 'country'};
        this.List = [
        { text: 'Architecture', image: '1', status: 'Available', country: 'USA'  },
        { text: 'Biographies', image: '2', status: 'Available', country: 'USA' },
        { text: 'Business', image: '3', status: 'Available', country: 'England' },
        { text: 'ComputerIT', image: '4', status: 'Available', country: 'England' },
        { text: "Comics", image: "5", status: "Available", country: 'USA' }
   		 ];
		this.groupTemplate = '<div class="group"> ${country} </div>';

    }

}

headerTemplate `string`

Accepts the template design and assigns it to the header container of the popup list.

Default Value:

null

Example

HTML

<input type="text" id="searchbox" ej-combobox [dataSource]="List" [fields]="fields" [headerTemplate]="headerTemplate" [itemTemplate]="itemTemplate" [footerTemplate]="footerTemplate"/>

constructor() {
        this.fields = { text: 'text', groupBy: 'country'};
        this.List = [
        { text: 'Architecture', image: '1', status: 'Available', country: 'USA'  },
        { text: 'Biographies', image: '2', status: 'Available', country: 'USA' },
        { text: 'Business', image: '3', status: 'Available', country: 'England' },
        { text: 'ComputerIT', image: '4', status: 'Available', country: 'England' },
        { text: "Comics", image: "5", status: "Available", country: 'USA' }
   		 ];
		this.headerTemplate= '<div class="head">  Photo  <span style="padding-left:42px"> Contact Info </span></div>';
        this.itemTemplate= '<div><img class="image" src="${image}.png" alt="employee"/>' +
            '<div class="ename"> ${text} </div><div class="temp"> ${country} </div></div>';
        this.footerTemplate= '<div class="Foot"> Total Items Count: 5 </div>';

    }

htmlAttributes `object`

Allows additional HTML attributes such as title, name, etc., and accepts n number of attributes in a key-value pair format.

Default Value:

{}

Example

HTML

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

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', '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.htmlAttributes= { title: 'List of games available here.' };
    }

index `number`

Gets or sets the index of the selected item in the component.

Default Value:

null

Example

HTML

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

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', '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.index= 3;
    }

itemTemplate `string`

Accepts the template design and assigns it to each list item present in the popup.

Default Value:

null

Example

HTML

<input type="text" id="searchbox" ej-combobox [dataSource]="List" [fields]="fields" [headerTemplate]="headerTemplate" [itemTemplate]="itemTemplate" [footerTemplate]="footerTemplate"/>

constructor() {
        this.fields = { text: 'text', groupBy: 'country'};
        this.List = [
        { text: 'Architecture', image: '1', status: 'Available', country: 'USA'  },
        { text: 'Biographies', image: '2', status: 'Available', country: 'USA' },
        { text: 'Business', image: '3', status: 'Available', country: 'England' },
        { text: 'ComputerIT', image: '4', status: 'Available', country: 'England' },
        { text: "Comics", image: "5", status: "Available", country: 'USA' }
   		 ];
		this.headerTemplate= '<div class="head">  Photo  <span style="padding-left:42px"> Contact Info </span></div>';
        this.itemTemplate= '<div><img class="image" src="${image}.png" alt="employee"/>' +
            '<div class="ename"> ${text} </div><div class="temp"> ${country} </div></div>';
        this.footerTemplate= '<div class="Foot"> Total Items Count: 5 </div>';

    }

locale `string`

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Default Value:

“en-US”

Example

HTML

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

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', '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.locale= "en-US";
    }

noRecordsTemplate `string`

Accepts the template design and assigns it to popup list of component when no data is available on the component.

Default Value:

No Records Found

Example

HTML

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

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', '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.noRecordsTemplate= "Data Not Found";
    }

placeholder `string`

Accepts the value to be displayed as a watermark text on the component input.

Default Value:

null

Example

HTML

<input type="text" id="visualmode" ej-combobox [dataSource]="language" placeholder="select a skill" />

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', '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.noRecordsTemplate= "Data Not Found";
    }

popupHeight `string|number`

Specifies the height of the popup list.

Default Value:

“300px”

Example

HTML

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

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', '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.popupHeight= "400px";
    }

popupWidth `string|number`

Specifies the width of the popup list. By default, the popup width sets based on the width of the component.

Default Value:

“100%”

Example

HTML

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

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', '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.popupWidth= "400px";
    }

query `ej.Query`

The query to retrieve the data from the data source.

Default Value:

null

Example

HTML

<input id="databindingremote" type="text" ej-combobox [query]="query" [fields]="fields" placeholder="Search a customer" [dataSource]="dataManger" />

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

readonly `boolean`

When set to true, the user interactions on the component are disabled.

Default Value:

false

Example

HTML

<input type="text" id="combobox" ej-combobox [dataSource]="language" [readonly]="true" />

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', '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'];
    }

showClearButton `boolean`

Specifies whether to show or hide the clear button. When the clear button is clicked, value, text, and index properties are reset to null.

Default Value:

true

Example

HTML

<input type="text" id="combobox" ej-combobox [dataSource]="language" [showClearButton]="false" />

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', '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`

Specifies the sortOrder to sort the data source. The available type of sort orders are

Name	Description
None	The data source is not sorting.
Ascending	The data source is sorting with ascending order.
Descending	The data source is sorting with descending order.

Default Value:

ej.SortOrder.None

Example

HTML

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

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', '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'];
    }

text `string`

Gets or sets the display text of the selected item in the component.

Default Value:

null

Example

HTML

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

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', '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'];
    }

value `number|string`

Gets or sets the value of the selected item in the component.

Default Value:

null

Example

HTML

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

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', '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 `number|string`

Specifies the width of the component. By default, the component width sets based on the width of its parent container. You can also set the width in pixel values.

Default Value:

“100%”

Example

HTML

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

constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', '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.width = "300px";
    }

Methods

addItem()

Adds a new item to the popup list. By default, new item appends to the list as the last item, but you can insert based on the index parameter.

Name	Type	Description
items	[] \| Object	Specifies an array of JSON data or a JSON data.
itemIndex (optional)	number	Specifies the index to place the newly added item in the popup list.

Returns: void

Example

HTML

<input type="text" id="combobox" ej-combobox />

let acObj = $('#combobox').data('ejComboBox');
    acObj.addItem({ id: 'level11', sports: 'cricket' });

focusIn()

Sets the focus to the component for interaction.

Returns: void

Example

HTML

<input type="text" id="combobox" ej-combobox />

let acObj = $('#combobox').data('ejComboBox');
    acObj.focusIn();

focusOut()

Moves the focus from the component if the component is already focused.

Returns: void

Example

HTML

<input type="text" id="combobox" ej-combobox />

let acObj = $('#combobox').data('ejComboBox');
    acObj.focusOut();

getDataByValue()

Gets the data object that matches the given value.

Name	Type	Description
value	string \| number	Specifies the value of the list item.

Returns: object

Example

HTML

<input type="text" id="combobox" ej-combobox />

let acObj = $('#combobox').data('ejComboBox');
    let items = acObj.getDataByValue("value");

getItems()

Gets all the list items bound on this component.

Returns: Element[]

Example

HTML

<input type="text" id="combobox" ej-combobox />

let acObj = $('#combobox').data('ejComboBox');
    let items = acObj.getItems();

hidePopup()

Hides the popup if it is in open state.

Returns: void

Example

HTML

<input type="text" id="combobox" ej-combobox />

let acObj = $('#combobox').data('ejComboBox');
    acObj.hidePopup();

showPopup()

Opens the popup that displays the list of items.

Returns: void

Example

HTML

<input type="text" id="combobox" ej-combobox />

let acObj = $('#combobox').data('ejComboBox');
    acObj.showPopup();

Events

actionBegin

Triggers before fetching data from the remote server.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the ComboBox 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-combobox [query]="query" [fields]="fields" placeholder="Search a customer" [dataSource]="dataManger" (actionBegin)="actioning(args)" />

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

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

actionComplete

Triggers after data is fetched successfully from the remote server.

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

NOTE

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

Example

HTML

<input id="databindingremote" type="text" ej-combobox [query]="query" [fields]="fields" placeholder="Search a customer" [dataSource]="dataManger" (actionComplete)="actioning(args)" />

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

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

actionFailure

Triggers when the data fetch request from the remote server fails.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
e	object	Returns the error message
model	object	returns the Autocomplete model
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-combobox [query]="query" [fields]="fields" placeholder="Search a customer" [dataSource]="dataManger" (actionFailure)="actioning(args)" />

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

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

change

Triggers when an item in a popup is selected or when the model value is changed.

</tr>

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the combobox model object.
type	string	Name of the event.
value	string\|number	Value of the combobox textbox.
itemData	Object	Data object of the selected item.
Item	Object	Li element of the selected item.
e	Object	Event argument.
isInteracted	boolean	value of the interaction

Example

HTML

<input id="databindingremote" type="text" ej-combobox [query]="query" [fields]="fields" placeholder="Search a customer" [dataSource]="dataManger" (ejchange)="change(args)" />

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

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

close

Triggers when the popup is closed.

Name	Type	Description
popup	object	Element of the combobox popup list

Example

HTML

<input id="databindingremote" type="text" ej-combobox [query]="query" [fields]="fields" placeholder="Search a customer" [dataSource]="dataManger" (close)="close(args)" />

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

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

create

Triggers when ComboBox widget is created.

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

Example

HTML

<input id="databindingremote" type="text" ej-combobox [query]="query" [fields]="fields" placeholder="Search a customer" [dataSource]="dataManger" (create)="create(args)" />

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

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

customValueSpecifier

Triggers on set a custom value to this component.

Name	Type	Description
model	Object	Instance of the combobox model object.
type	string	Name of the event.
text	string	text of the combobox.

Example

HTML

<input id="databindingremote" type="text" ej-combobox [query]="query" [fields]="fields" placeholder="Search a customer" [dataSource]="dataManger" (customValueSpecifier)="custom(args)" />

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

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

filtering

Triggers on typing a character in the component.

Name	Type	Description
model	Object	Instance of the combobox model object.
type	string	Name of the event.
text	string	text of the combobox.
updateData	function	Function used to update the filtering value.

Example

HTML

<input id="databindingremote" type="text" ej-combobox [query]="query" [fields]="fields" placeholder="Search a customer" [dataSource]="dataManger" (filtering)="filtering(args)" />

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

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

focus

Triggers when the component is focused.

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

Example

HTML

<input id="databindingremote" type="text" ej-combobox [query]="query" [fields]="fields" placeholder="Search a customer" [dataSource]="dataManger" (focus)="focus(args)" />

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

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

open

Triggers after the suggestion list is opened.

Name	Type	Description
popup	object	Element of the combobox popup list

Example

HTML

<input id="databindingremote" type="text" ej-combobox [query]="query" [fields]="fields" placeholder="Search a customer" [dataSource]="dataManger" (open)="open(args)" />

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

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

select

Triggers when an item in the popup is selected.

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the combobox model object.
type	string	Name of the event.
value	string\|number	Value of the combobox textbox.
text	string	Text of the selected item.
itemData	Object	Data object of the selected item.
Item	Object	Li element of the selected item.
e	Object	Event argument.
isInteracted	boolean	value of the interaction

Example

HTML

<input id="databindingremote" type="text" ej-combobox [query]="query" [fields]="fields" placeholder="Search a customer" [dataSource]="dataManger" (select)="select(args)" />

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

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

ejComboBox

Requires

Members

actionFailureTemplate string

Default Value:

Example

allowCustom boolean

Default Value:

Example

allowFiltering boolean

Default Value:

Example

autofill boolean

Default Value:

Example

cssClass string

Default Value:

Example

dataSource Object|Array

Default Value:

Example

enableRtl boolean

Default Value:

Example

enabled boolean

Default Value:

Example

fields Object

fields.groupBy string

Default Value:

fields.iconCss string

Default Value:

fields.value string

Default Value:

fields.text string

Default Value:

Example

footerTemplate string

Default Value:

Example

groupTemplate string

Default Value:

Example

headerTemplate string

Default Value:

Example

htmlAttributes object

Default Value:

Example

index number

Default Value:

Example

itemTemplate string

Default Value:

Example

locale string

Default Value:

Example

noRecordsTemplate string

Default Value:

Example

placeholder string

Default Value:

Example

popupHeight string|number

Default Value:

Example

popupWidth string|number

Default Value:

Example

query ej.Query

Default Value:

Example

readonly boolean

Default Value:

Example

showClearButton boolean

Default Value:

Example

sortOrder enum

actionFailureTemplate `string`

allowCustom `boolean`

allowFiltering `boolean`

autofill `boolean`

cssClass `string`

dataSource `Object|Array`

enableRtl `boolean`

enabled `boolean`

fields `Object`

fields.groupBy `string`

fields.iconCss `string`

fields.value `string`

fields.text `string`

footerTemplate `string`

groupTemplate `string`

headerTemplate `string`

htmlAttributes `object`

index `number`

itemTemplate `string`

locale `string`

noRecordsTemplate `string`

placeholder `string`

popupHeight `string|number`

popupWidth `string|number`

query `ej.Query`

readonly `boolean`

showClearButton `boolean`

sortOrder `enum`

text `string`

value `number|string`

width `number|string`