11

私は、作成中の Django サイトで Twitter ブートストラップを使用しています。ブートストラップの先行入力を備えたテキスト入力で、ユーザーがすべての技術スキルを入力できるページがあります。ドロップダウン メニュー内で現在選択されているテキストにアクセスしようとしています。Enter キーを押してドロップダウンで要素を強調表示すると、その値が取得され、入力テキスト フィールドの下に表示されます。次に、入力テキスト フィールドがクリアされ、ユーザーは別のスキルを検索できます。

$(document).keyup(function(event) {
    if (event.keyCode == 13) {    
      if ($('.dropdown-menu').css('display') != 'none'){
        var newskill = $(".dropdown-menu > li.active").val();
        alert('Yay');
      }
      else{
        var newskill = $("#enterbox").val();
        alert('Boo');
      }      
      return false;
    }
  });

ドロップダウンが表示されている場合、enter keypress 関数はドロップダウンの現在アクティブな要素を取得し、それをテキスト ボックス (Bootstrap に組み込まれています) に貼り付けます。アラート ボックスは表示されません。それが起こる前に、つまりBootstrapの機能が作動する前に、機能をトリガーする方法を教えてください。

4

3 に答える 3

29

デモ

キープレスをリッスンする代わりに (ユーザーがマウスで選択した場合はどうなるでしょうか?)、Twitter の Typeahead が発行するカスタム イベントを利用できます。すなわち、

  • typeahead:selected– ドロップダウン メニューからの提案が明示的に選択されたときにトリガーされます。

選択範囲のキャプチャ

jQuery の.on()メソッドを使用してリッスンでき、2 番目の引数でユーザーの選択に関する情報が提供されます。

$('input.typeahead').on('typeahead:selected', function(event, selection) {
  alert(selection.value);
});

入力フィールドのクリア

そこから、 で好きなようにできますselection.value。唯一の「落とし穴」は、を使用して入力をクリアしようとすること.val()です。Typeahead は高度な DOM 書き換えをかなり行うため、「setQuery」メソッドも使用する必要があります。

$('input.typeahead').typeahead('setQuery', '');
于 2013-09-10T04:46:28.273 に答える
11

以下のように、先行入力コードにリスナーをアタッチできます。

 $('#input').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    },
    {
        name: 'some name',
        displayKey: 'value',
        source: data.ttAdapter(),

    }).on('keyup', this, function (event) {
        if (event.keyCode == 13) {
            $('#input').typeahead('close');
        }
    });
于 2014-05-10T23:52:22.977 に答える
2 
$(document).keyup(function(event) {
    if (event.keyCode == 13) {    
    $('#yourtextbox').val("");  
    $('#yourtextbox').typeahead('close');
    }
  });

ここで typeahead のドキュメントを見つけることができますhttps://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md

于 2014-03-05T11:32:57.413 に答える