The ComboBox widget allows the selection from pre-defined values or entering a new value. It is a richer version of the standard HTML select, providing support for local and remote data binding, item templates, and configurable options for controlling the list behavior.

To prevent user input, use the combobox.

Getting Started

There are two basic ways to create a ComboBox:

1. From a HTML input element, using data binding to define the list items
2. From a HTML select element, using HTML to define the list items

Regardless of the initialization technique, the resulting ComboBox will look and function identically.

<input id="comboBox" />

$(document).ready(function(){
    $("#comboBox").kendoComboBox({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: [
            { text: "Item1", value: "1" },
            { text: "Item2", value: "2" }
        ]
    });
});

<select id="comboBox">
 <option>Item 1</option>
 <option>Item 2</option>
 <option>Item 3</option>
</select>

<script>
   $(document).ready(function(){
     $("#comboBox").kendoComboBox();
   });
</script>

Binding to Data

The ComboBox can be bound to both local arrays and remote data via the DataSource component; an abstraction for local and remote data. Local arrays are appropriate for limited value options, while remote data binding is better for larger data sets. With remote binding, options will be loaded on-demand, similar to an combobox.

$(document).ready(function() {
 $("#comboBox").kendoComboBox({
  index: 0,
  dataTextField: "Name",
  dataValueField: "Id",
  filter: "contains",
  dataSource: {
   type: "odata",
   serverFiltering: true,
   serverPaging: true,
   pageSize: 20,
   transport: {
    read: "http://odata.netflix.com/Catalog/Titles"
   }
  }
 });
});

Customizing Item Templates

ComboBox leverages Kendo UI high-performance Templates to give you complete control over item rendering. For a complete overview of Kendo UI Template capabilities and syntax, please review the Kendo UI Template demos and documentation.

<input id="comboBox" />
<!-- Template -->
<script id="scriptTemplate" type="text/x-kendo-template">
 # if (data.BoxArt.SmallUrl) { #
 <img src="${ data.BoxArt.SmallUrl }" alt="${ data.Name }" />Title:${ data.Name }, Year: ${ data.Name }
 # } else { #
 <img alt="${ data.Name }" />Title:${ data.Name }, Year: ${ data.Name }
 # } #
</script>
<!-- ComboBox initialization -->
<script>
 $(document).ready(function() {
  $("#comboBox").kendoComboBox({
   autoBind: false,
   dataTextField: "Name",
   dataValueField: "Id",
   template: $("#scriptTemplate").html(),
   dataSource: {
    type: "odata",
    serverFiltering: true,
    serverPaging: true,
    pageSize: 20,
    transport: {
     read: "http://odata.netflix.com/Catalog/Titles"
    }
   }
  });
 });
</script>

Accessing an Existing ComboBox

You can reference an existing ComboBox instance via jQuery.data(). Once a reference has been established, you can use the API to control its behavior.

var comboBox = $("#comboBox").data("kendoComboBox");