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

Wire the blur Event of the Filter Input in the MultiSelect

Environment

Product Progress® Kendo UI® MultiSelect for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript

Description

How can I bind to the blur event of the filter input element in a Kendo UI DropDownList?

Solution

The following example demonstrates how to achieve the desired scenario.

    <div id="example" role="application">
        <div class="demo-section k-header">
            <h2>Invite Attendees</h2>
            <label for="required">Required</label>
            <select id="required" multiple="multiple" data-placeholder="Select attendees...">
                <option>Steven White</option>
                <option>Nancy King</option>
                <option>Nancy Davolio</option>
                <option>Robert Davolio</option>
                <option>Michael Leverling</option>
                <option>Andrew Callahan</option>
                <option>Michael Suyama</option>
                <option selected>Anne King</option>
                <option>Laura Peacock</option>
                <option>Robert Fuller</option>
                <option>Janet White</option>
                <option>Nancy Leverling</option>
                <option>Robert Buchanan</option>
                <option>Margaret Buchanan</option>
                <option selected>Andrew Fuller</option>
                <option>Anne Davolio</option>
                <option>Andrew Suyama</option>
                <option>Nige Buchanan</option>
                <option>Laura Fuller</option>
            </select>
        </div>
        <style scoped>
            .demo-section {
                width: 350px;
                min-height: 140px;
            }
            .demo-section h2 {
                font-weight: normal;
            }
            .demo-section label {
                display: inline-block;
                margin: 15px 0 5px 0;
            }
            .demo-section select {
                width: 350px;
            }
            #get {
                float: right;
                margin: 25px auto 0;
            }
        </style>
        <script>
            $(document).ready(function() {
                // create MultiSelect from select HTML element
                var required = $("#required").kendoMultiSelect().data("kendoMultiSelect");

                //add the autocomplete="off" attribute

                required.input.bind("blur", function() {
                                alert(1);
                });
            });
        </script>
    </div>

See Also

In this article