New to Kendo UI for jQuery? Download free 30-day trial

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.

In this article