Open ComboBox When onFocus Is Triggered

The following example demonstrates how to make the dropdown list of a Kendo UI ComboBox open when the user triggers the onfocus event.

Example:

  <div id="example">
    <div class="demo-section k-header">
      <h4>Fabrics</h4>
      <input id="fabric" style="width: 400px" />
    </div>
    <script>
    $(document).ready(function() {
        $("#fabric").kendoComboBox({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: [
                { text: "Cotton", value: "1" },
                { text: "Polyester", value: "2" },
                { text: "Cotton/Polyester", value: "3" },
                { text: "Rib Knit", value: "4" }
            ]
        });
    });
    </script>

    <script>
      //Open on focus logic
      $(function() {
        $("[data-role=combobox]").each(function() {
          var widget = $(this).getKendoComboBox();
          widget.input.on("focus", function() {
                widget.open();
          });
        });
      });
    </script>
  </div>

See Also

• ComboBox JavaScript API Reference
• How to Bypass Boundary Detection
• How to Configure Deferred Value Binding
• How to Expand ComboBox Located in Bootstrap Layout
• How to Implement Cascading with Local Data
• How to Make Visible Input Readonly
• How to Prevent Adding Custom Values
• How to Select Items on Tab
• How to Underline Matched Search

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