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

时间:2013-01-24 12:55:58

标签: javascript jquery jquery-plugins jquery-chosen

除了一个小问题之外,我们目前正在使用Chosen Dropdown Plugin,这是相当棒的。当我们使用单个下拉列表时,如果您选中“已选择”控件,则不显示实际下拉列表部分。但是,当将插件应用于多个“选择”时,它会出现。

在完成了文档和GitHub问题之后,似乎有很多关于标签排序和聚焦的提及,但似乎并没有提到这个相当简单的要求;标签时接收焦点时显示下拉列表。

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

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

到目前为止,我还没有成功,并且想知道其他人是否遇到过这个问题。您可以查看演示此问题的jsfiddle

1 个答案:

答案 0 :(得分:8)

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

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

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

  4. $('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');