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

Question

我正在编写一个小脚本，它将焦点设置到多选jquery小部件的过滤器文本输入字段。 根据文档，我可以订阅小部件的click事件，如下所示：

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

所以我尝试了这个：

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

以下是该小部件的链接： http ： //www.erichynds.com/jquery/jquery-ui-multiselect-widget/

我还尝试了其他一些方法（$（''）。is（'：text'）;等），但无法获得钩子。

这是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>

谢谢

Answer 1

我知道这有点旧，但在我的情况下，我在页面上有很多这些小部件。 所以我做了一些与众不同的事情。

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

Answer 2

创建多选小部件时，只需添加以下“打开”方法即可。

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

对于IE10 bowser：

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

Answer 3

我没有尝试过前两个解决方案，看看是否存在rrusnak的问题。 我的解决方案没有任何rrusnak提到的其他问题。 这个可以在页面上使用无限数量的选择器，并使用简单的jQuery以及Eric Hynds建议将多选过滤器系统实现到多选小部件：

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

它干净，可以与其他小部件选项链接，并立即允许文本输入，而无需先点击输入过滤器。

IMO Eric应该在他的过滤器脚本中包含一个自动焦点 - 因为在小部件上使用过滤器意味着无论如何都要使用它。 因此，必须手动聚焦到输入字段是用户不必要的点击。

Answer 4

以上两个答案对我有用，但是当过滤器聚焦时，插件会发生一些令人恼火的事情。 最值得注意的是，您不能再使用箭头键选择一个选项，这实际上会消除键盘控制。

我已经实现了一些更改，您可以在下面的github链接中找到它们。

1. 修复了表单的标签问题
2. 在选择过滤器时，允许使用箭头键选择选项
3. 我已将遍历功能更改为对筛选列表友好。
4. 我已经改变了遍历功能，使用向上箭头一次向上移动一个选项（而不是转到列表的顶部）
5. 按'f'（或'ctrl-f'）将重新聚焦在滤镜盒上

希望这可以帮助那些遇到与我一样的问题的人。 这些更改包括常规multiselect和filter src文件。

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