Prevent Submission of Value that Is not Present in the ComboBox DataSource

Environment

Product	Progress® Kendo UI® ComboBox for jQuery
Operating System	All
Browser	All
Preferred Language	JavaScript

Description

How can I prevent the submission of a value that is entered in the input of the ComboBox when this value does not match any of the items in the DataSource?

Solution

In the handler of the ComboBox change event which fires on blurring the widget, check if the entered text matches an item in the DataSource. If it does not, replace the entered text with an empty string.

    <input id="combobox"  />
    <script>
       $(document).ready(function() {
        var items = [
            { Value : '1', Name : 'Anna' },
            { Value : '2', Name : 'Bob' },
            { Value : '3', Name : 'Daniel' },
            { Value : '4', Name : 'Charlie' }
        ];

        $('#combobox').kendoComboBox({
            dataSource : items,
            dataTextField : 'Name',
            dataValueField : 'Value',
            filter : 'contains',
            change : function (e) {
                if (this.value() && this.selectedIndex == -1) {    
                    this.dataSource.filter({
                        value: this.value(),
                        field: this.options.dataTextField,
                        operator: "contains"
                    });
                    this.select(0);
                    if ( this.selectedIndex == -1 ) {                    
                        this.text("");
                    }
                }
            }
        }).data('kendoComboBox');
    });
    </script>

For the full implementation of the approach, refer to this Dojo example.