将焦点设置为jQuery UI MultiSelect Widget中的Filter输入

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

I know this is a little old, but in my case i had alot of these widgets on the page. So I did something a little different that worked perfectly.

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

Answer 2

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();                   
    }
});

Answer 3

I haven't tried the first two solutions to see if rrusnak's problems exist. My Solution doesn't have any of the problems rrusnak mentions about the others. This one works with an unlimited number of Selectors on a page and uses simple jQuery along with Eric Hynds recommendations of implementing his multiselect filter system to the multiselect widget:

$("#MyStatusWidget").multiselect({
open: function () {
  $(this).multiselectfilter("widget").find('input').focus();
  }
  }).multiselectfilter({
  label: '',
  autoReset: true
});

Its clean, can be chained with the other widget options and immediately allows text input without having to first click on the input filter.

IMO Eric should have included an automatic focus in his filter script - as the use of a filter on the widget implies that it is to be used anyway. So having to manually focus to the input field is an unnecessary click for users.

Answer 4

The above two answers worked for me, however there were a number of irritating things with the plugin that happen when the filter is focused. Most notably you can no longer use the arrow keys to select an option, which really takes away keyboard control.

I have implemented a number of changes, that you can find at my github link below.

1. Fixes tabbing issues with the form
2. Allows use of the arrow keys to select options while the filter is selected
3. I have changed the traverse function to be friendly towards filtered lists.
4. I have changed the traverse function to move up one selection at a time when using the up arrow (instead of going to the top of the list)
5. Pressing 'f' (or 'ctrl-f') will re-focus on the filter box

Hopefully this helps anyone who has had some of the same issues as myself. The changes are in both the regular multiselect as well as the filter src files.

https://github.com/rrusnak1/jquery-ui-multiselect-widget