Question

I am writing a small script which will set focus to the filter text input field of the multi select jquery widget. Based on the documentation, I can subscribe to the click event of the widget like this:

// bind to event
$("#multiselect").bind("multiselectopen", function(event, ui){
    // event handler here
});

So I tried this:

$("#MyStatusWidget").bind("multiselectopen", function(event, ui){
            // event handler here
            $(this).$(".ui-multiselect-filter").contents('input :text').focus());
        });

Here is a link to the widget: http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/

I also tried a couple other methods ($(”).is(‘:text’); etc), but can’t get the hook.

Here is the HTML:

<div class="ui-widget-header ui-corner-all ui-multiselect-header ui-helper-clearfix ui-multiselect-hasfilter">
<div class="ui-multiselect-filter">
Filter:
<input type="search" placeholder="Enter keywords">
</div>
<ul class="ui-helper-reset">
</div>

Thank you

Answer 1

When you create your multi select widget simply add the following “open” method.

$("#MyStatusWidget").multiselect({
    open: function () {
        $("input[type='search']:first").focus();                   
    }
});

For IE10 bowser:

$("#MyStatusWidget").multiselect({
    open: function () {
        $("input[type='text']:first").focus();                   
    }
});