jQuery Chosen Plugin：タブ移動時にフォーカスをキャプチャする

Question

私たちは現在Chosen Dropdown Pluginを使用しています。単一のドロップダウンを使用しているときに、「選択された」コントロールにタブすると、実際のドロップダウン部分は表示されません。ただし、複数の「選択」にプラグインを適用すると、そのプラグインが表示されます。

ドキュメンテーションとGitHubの問題を鑑みると、タブの順序付けとフォーカスに関して多くの言及があるようですが、これはむしろ単純な要件を扱っているようです。タブ移動時にフォーカスを受け取ると、ドロップダウンを表示します。

この機能がプラグインの一部ではないと仮定すると、アンカータグのフォーカスをキャプチャするなどの代替手段がありますか？

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

これまでのところ、私は成功しておらず、他の人がこの問題を経験しているのか疑問に思っていました。あなたが内部conainerを選択したthatsの検索入力ではなく、アンカー要素のフォーカスイベントを追跡する必要があります

Answer 1

1. 問題を示し、このjsfiddleをチェックアウトすることができ、その後、選択したコンテナのためのマウスダウンイベントをトリガ - それはイベントですそれはあなたが委任イベントを使用する必要があるドロップダウンを開く

2. に耳を傾け、動的に追加された要素にイベントハンドラをバインドするために近づいている（以前のjQueryの1.7.1とのために、あなただけの「ライブ」の方法を使用することができる）

3. また、コンテナがアクティブであるかどうかを確認する必要があります$('#select').trigger('liszt:open');： - 現在、（選ばれたドロップダウンが開かれます検索入力が再び焦点を当てされます）再帰呼び出しを避けるために

 
$('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'); を働いています