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.