ejComboBox

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"/>
  • ts
  • 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"/>
  • ts
  • 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"/>
  • ts
  • 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"/>
  • ts
  • 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"/>
  • ts
  • 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" />
  • ts
  • 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" />
  • ts
  • 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" />
  • ts
  • 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" />
  • ts
  • 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"/>
  • ts
  • 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"/>
  • ts
  • 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"/>
  • ts
  • 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" />
  • ts
  • 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" />
  • ts
  • 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"/>
  • ts
  • 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" />
  • ts
  • 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" />
  • ts
  • 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" />
  • ts
  • 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" />
  • ts
  • 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" />
  • ts
  • 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" />
  • ts
  • 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" />
  • ts
  • 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" />
  • ts
  • 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" />
  • ts
  • 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" />
  • ts
  • 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" />
  • ts
  • 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" />
  • ts
  • 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 />
  • ts
  • 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 />
  • ts
  • 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 />
  • ts
  • 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 />
  • ts
  • 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 />
  • ts
  • 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 />
  • ts
  • 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 />
  • ts
  • 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)" />
  • ts
  • 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)" />
  • ts
  • 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)" />
  • ts
  • 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)" />
  • ts
  • 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)" />
  • ts
  • 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)" />
  • ts
  • 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)" />
  • ts
  • 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)" />
  • ts
  • 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)" />
  • ts
  • 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)" />
  • ts
  • 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)" />
  • ts
  • 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
        }