21

テキスト入力 (id="Questions") がフォーカスされたときにすべての Typeahead アイテムを表示したいと思います。どうすればいいですか？

Javascript:

function SetTypeahead() {
    $("#Questions").typeahead({
        minLength: 0,
        source: [
                "Q1?",
                "Q2?",
                "Q3?",
                "@4?"
        ]
    });
}
4

10 に答える 10

17

https://raw.github.com/michaelcox/bootstrap/6789648b36aedaa795f1f5f11b4da6ab869f7f17/js/bootstrap-typeahead.jsで、最新のブートストラップ typeahead プラグイン v2.1.2 を入手してください。

この更新により、0 の minLength で先行入力のすべてを表示できるようになります

<input id="typeaheadField" name="typeaheadField" type="text" placeholder="Start Typing">

$("#typeaheadField").typeahead({
                        minLength: 0,
                        items: 9999,
                        source: ["Alabama","Alaska","Arizona","Arkansas","California","Colorado", "Oregon"]    
                    });

次に、プラグインによって定義されていないため、onFocus イベントを要素にアタッチする必要があります。 

$("#typeaheadField").on('focus', $("#typeaheadField").typeahead.bind($("#typeaheadField"), 'lookup'));

結果が多すぎる場合に備えて、ブートストラップの typeahead css クラスをローカルで上書きして、結果の最大高さと垂直スクロールを設定することもお勧めします。

.typeahead {
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
于 2012-12-19T00:13:38.703 に答える
1

これに対する解決策は、ブートストラップ github にあります: https://github.com/twitter/bootstrap/pull/5063

編集: そのリンクは無効です。Andrew が投稿したリンクを使用してください: https://github.com/ptnplanet/Bootstrap-Better-Typeahead

于 2012-10-26T19:38:05.193 に答える
0

v3.1.0typeheadの最後のバージョンには明示的なオプションがありました

showHintOnFocus:true
于 2015-07-23T08:22:19.697 に答える
0

theophraim の typeaheadからのこのプル リクエストを確認してください。彼はこの機能を含めましたが、まだマージされていません。

于 2014-01-03T07:57:38.650 に答える
0

これが私の解決策です：

  • 先行入力の初期化

    $("#FinalGrades", context).typeahead({ minLength: 0, items: 10, scrollBar: true, source: finalGrades });

  • テキスト ボックス イベントのトリガー

    $("#FinalGrades", context).on("keyup focus", function (e) {
    var that = $(this);
    if (that.val().length > 0 || e.keyCode == 40 || e.keyCode == 38) return;
    that.select();
    var dropDown = that.next('.dropdown-menu');
    dropDown.empty();
    $("#FinalGrades", context).val(qualificationNames[0]);
    that.trigger('keyup');
    $.each(finalGrades, function (index, value) {
        var item = '<li data-value="' + value + '" class=""><a href="#">' + value + '</a></li>';
        dropDown.append(item);
    });
    that.val('');
});
于 2016-07-29T10:27:38.103 に答える