Kendo UI ComboBox with required match

Example of a KendoUI ComboBox that requires the user to type or select a value in the list or the value is cleared.

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<div id="example">
    <div>
        <input id="checkbox" type="checkbox" data-bind="checked: allowCustomValues" />
        <label for="checkbox">Allow Custom Values</label>
    </div>
    <input class="combobox" />
    <input class="combobox" />
    <input class="combobox" />
</div>

CSS

#example > * {
    display: block;
    margin: 10px;
}

JavaScript

(function () {

    var viewModel = kendo.observable({
        allowCustomValues: true,
        testData: new kendo.data.DataSource({
            data: [{
                id: 1,
                name: 'Apple'
            }, {
                id: 2,
                name: 'Banana'
            }, {
                id: 3,
                name: 'Orange'
            }, {
                id: 4,
                name: 'Kiwi'
            }]
        })
    });

    $('.combobox').kendoComboBox({
        dataSource: viewModel.testData,
        autoBind: false,
        dataTextField: 'name',
        dataValueField: 'id',
        suggest: true,
        placeholder: 'Select a Fruit',
        change: function (e) {
            var cmb = this;
            // selectedIndex of -1 indicates custom value
            if (cmb.selectedIndex < 0 && !viewModel.allowCustomValues) {
                cmb.value(null); // or set to the first item in combobox
            }
        }
    });

    kendo.bind('#example', viewModel);


})();