jQuery Chosen插件:在Tab键时捕获焦点打开

Question

我们目前正在使用Chosen Dropdown插件,除了一个小问题外,它非常棒.当我们使用单个下拉菜单时,如果您选中"已选择"控件,则不显示实际下拉列表部分.但是,当将插件应用于多个"选择"时,它确实会出现.

通过文档和GitHub问题,似乎有很多关于标签排序和聚焦的提及,但似乎没有任何看似处理这个相当简单的要求; 标签时接收焦点时显示下拉列表.

因此,假设此功能不是插件的一部分,是否有其他选择,例如捕获锚标记的焦点？

$('.chzn-single').focus(function(e){
    alert('I should be focused!')
});    

到目前为止,我还没有成功,并且想知道是否有其他人遇到过这个问题.你可以查看这个证明问题的jsfiddle

Answer 1

1. 您应该跟踪所选内容中的搜索输入的焦点事件,而不是锚元素,然后触发所选容器的mousedown事件 - 这是打开下拉列表时侦听的事件

2. 您需要使用委托事件方法将事件处理程序绑定到动态添加的元素(对于jquery 1.7.1及更早版本,您可以使用'live'方法)

3. 您还需要检查容器当前是否处于活动状态,以避免递归调用(当选择下拉列表打开时 - 搜索输入将再次聚焦)

$('body').on('focus', '.chzn-container-single input', function() {
    if (!$(this).closest('.chzn-container').hasClass('chzn-container-active'))
        $(this).closest('.chzn-container').trigger('mousedown');
        //or use this instead
        //$('#select').trigger('liszt:open');  
});

这是工作的jsfiddle

而不是$(this).closest('.chzn-container').trigger('mousedown'); 你也可能触发插件的内部事件:$('#select').trigger('liszt:open');