10

We're currently using the Chosen Dropdown Plugin which is rather awesome, apart from one minor issue. When we're using a single dropdown, if you tab into the 'chosen' control, the actual dropdown portion is not shown. However, when applying the plugin to a multiple 'select', it does appear.

Having been through the documentation and GitHub issues, there seems to be a lot of mentions regarding tab ordering and focusing, but nothing that seemingly deals with this rather simple requirement; Display the dropdown when receiving focus when tabbing.

So assuming that this functionality is not part of the plugin, is there an alternative such as capturing the focus of the anchor tag? 

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

So far, I haven't been successful and was wondering whether any others have experienced this issue. You can check out this jsfiddle that demonstrates the problem

4

1 回答 1

8

  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');
        //或者改用这个
        //$('#select').trigger('listzt:open');  
});

这是工作的jsfiddle

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

于 2013-06-03T13:19:59.420 回答