New to Kendo UI for jQuery? Download free 30-day trial

Select Items on Tab

The following example demonstrates how to select an item in a Kendo UI ComboBox on pressing the Tab key.

  <div id="example">

    <div id="shipping">
      <label for="countries" class="info">Choose shipping countries:</label>

      <input id="countries" />

      <div class="hint">Start typing the name of an European country</div>

      $(document).ready(function () {
        var data = [
          "Albania Test",
          "Andorra Test",
          "United Kingdom 2test",
          "Vatican City 2test"

        //create AutoComplete UI component
        var combobox = $("#countries").kendoComboBox({
          dataSource: data,
          filter: "contains",
          placeholder: "Type '2t'",
          suggest: true

        combobox.input.on("keydown", function(e) {
          var filter = combobox.dataSource.filter() || { filters: [] };

          if (e.keyCode === 9 && filter.filters[0]) { //TAB
    <style scoped>
      .info {
        display: block;
        line-height: 22px;
        padding: 0 5px 5px 0;
        color: #36558e;

      #shipping {
        width: 482px;
        height: 152px;
        padding: 110px 0 0 30px;
        background: url('../content/web/autocomplete/shipping.png') transparent no-repeat 0 0;
        margin: 100px auto;

        width: 250px;
        vertical-align: middle;

      .hint {
        line-height: 22px;
        color: #aaa;
        font-style: italic;
        font-size: .9em;
        color: #7496d4;

See Also

For more runnable examples on the Kendo UI ComboBox, check its how-to articles.

In this article
Not finding the help you need? Improve this article