Navigate to Items Typing First Letter

Updated on Jun 17, 2026

Environment

Product

Progress® Kendo UI® ListBox for jQuery

Description

This sample demonstrates how to select and scroll to the item corresponding to the key pressed on the keyboard.

Solution

Attach a keydown event listener to the document. When a key is pressed, iterate over the ListBox items and select the first item whose text starts with the pressed key. Then scroll the list container to bring the selected item into view.

Example

View Source

    <div id="example" role="application">
      <div class="demo-section k-content wide">
        <select id="listbox"  >
          <option>Andrew Callahan</option>
          <option>bndrew Callahan</option>
          <option>bndrew allahan</option>
          <option>bndrew Calahan</option>
          <option>cndrew Callahan</option>
          <option>cndrew Callhan</option>
          <option>cndrew Calahan</option>
          <option>dichael Suyama</option>
          <option>dichael Leverlin</option>
          <option>Michael Leverling</option>
          <option>Michael Leverlng</option>
          <option>Michael Levering</option>
          <option>Michael Levrling</option>
          <option>Michael Lverling</option>
          <option>Nancy King</option>
          <option>Nancy Davolio</option>
          <option>Nancy Kig</option>
          <option>Nancy avolio</option>
          <option>Nancy Kin</option>
          <option>Nancy Davoli</option>
          <option>Robert Dalio</option>
          <option>Steven White</option>
          <option>tteven White</option>
          <option>wteven White</option>
          <option>xteven White</option>
        </select>
        <select id="listbox2"></select>
      </div>

      <script>
        $(document).ready(function() {
          $("#listbox").kendoListBox({
            selectable: "single",
            connectWith:"listbox2",
            navigatable: true,
            toolbar: {
              tools: ["moveUp", "moveDown", "transferTo", "transferFrom", "transferAllTo", "transferAllFrom", "remove"]
            }
          });

          $("#listbox2").kendoListBox({
            dataTextField: "ProductName",
            dataValueField: "ProductID",
            dataSource: [],
            selectable: "single",
            navigatable: true
          });

          $(document).on("keydown.examples", function (e) {
            var listBox =  $("#listbox").data().kendoListBox;

            if (e.altKey && e.keyCode === 87) {
              listBox.focus();
            }
            else{
              listBox.items().each(function(i,element){
                if($(element).text().toLowerCase().startsWith(e.key))
                {

                  listBox.select($(element));
                  $(".k-list-scroller").scrollTop($(element).position().top);
                  return;
                }
              })
            }
          });
        });
      </script>
    </div>
    <style>
      #example .demo-section {
        max-width: none;
        width: 605px;
      }

      #example .k-listbox {
        width: 255px;
        height: 250px;
      }

      #example .k-listbox:first-of-type {
        margin-right: 1px;
      }
    </style>