Kendo UI ComboBox Validate Input to List
Kendo UI ComboBox that validates the input value to the items in the selection list.
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<input class="customerComboBox"></input>
CSS
.customerComboBox {
width: 100px;
}
.customerList {
width: 400px !important;
}
.customerId, .customerName {
display: inline-block;
}
.customerId {
width: 75px;
}
.error {
background-color: Pink;
}
JavaScript
var _combobox = $(".customerComboBox").kendoComboBox({
dataSource: {
type: "odata",
transport: {
read: "http://services.odata.org/Northwind/Northwind.svc/Customers"
}
},
dataTextField: "CompanyName",
dataValueField: "CustomerID",
template: "<div class='customerId'>${ data.CustomerID }</div>" +
"<div class='customerName'>${ data.CompanyName }</div>"
}).data("kendoComboBox");
_combobox.list.addClass("customerList");
_combobox.input.on("blur", _combobox, function(e) {
var inputField = $(e.currentTarget);
var combobox = e.data;
var found = false;
var tooltip = "";
if (inputField.val().length == 0) {
found = true;
} else {
$.each(_combobox.dataSource._data, function(idx, customer) {
if (customer.CustomerID === inputField.val()) {
found = true;
tooltip = customer.CompanyName;
return false;
}
});
}
if (found == false) {
e.preventDefault();
$(e.currentTarget).addClass("error").removeAttr("title");
setTimeout(function() {
inputField.focus().select();
}, 100);
} else {
$(e.currentTarget).removeClass("error").attr("title", tooltip);
}
});