web-dev-qa-db-ja.com

Bootstrap-すべてのTypeaheadアイテムをフォーカスして表示する

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

JavaScript：

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

https://raw.github.com/michaelcox/bootstrap/6789648b36aedaa795f1f5f11b4da6ab869f7f17/js/bootstrap-typeahead.js で最新のbootstrap typeaheadプラグインv2.1.2を入手）==

この更新により、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'));

bootstrap typeahead css classをローカルで上書きして、結果が多すぎる場合に備えて、結果のmax-heightと垂直スクロールを設定することもお勧めします。

.typeahead {
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
16
user1893029

私にとって、選択時に$ viewValueがnullだったため、リストが表示されませんでした。私の解決策は、$ viewValueがnullのときにフィルターを空の文字列に設定することでした。

<input type="text"
  ng-model="gear.Value"
  uib-typeahead="gear as gear.Name for gear in gears | filter:$viewValue || ''"
  typeahead-show-hint="true"
  typeahead-min-length="0"
  typeahead-show-hint="true"
  typeahead-editable='false'
  typeahead-focus-first='false'
  class="form-control"
  name="gear"
  ng-required="true"/>
2
user2325333

最新バージョンを取得（bootstrap3-typeahead.js v4.0.2）Githubからのスクリプト：ダウンロード

HTMLコード：

<input data-provide="typeahead" id="q" type="text" value="" />

有効なJavaScript：

// autocomplete input text
$('#q').typeahead({
    // your json data source
    source: [your json or object here],
    // on click list option set as text value
    autoSelect: true,
    // set minlength 0 to show list on focus
    minLength: 0,
    // set no of items you want here
    items: 20,
    // set true if want to list option on focus
    showHintOnFocus: true
});

公式文書：Bootstrap-3-Typeahead

2
Neeraj Singh

bootstrap githubでこれの解決策があります： https://github.com/Twitter/bootstrap/pull/506

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

1
DrCorduroy

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

0
Tushar Sonawane

WORKS bootstrap-3-typeaheadの場合、最も簡単なのは、バックスペース（chr8）にフォーカスしたキーアップをシミュレートすることです。

$("#people_lookup").typeahead({
    source: people_list,
    minLength: 0
}).on('focus', function() {
    $(this).trigger(jQuery.Event('keyup', {which: 8}));
});
0
Paully

Typeahead githubの次のリンクに、それに関するクローズされた問題があります： https://github.com/Twitter/typeahead.js/issues/462

Jhardingで説明されているように、それがわかります。

「typeahead.jsは、すべての目的と目的のために、無限のデータセットを利用する検索ボックスを補完することを目的としています。ここで提案されている種類の機能は、typeahead.jsに求められる機能にはあまり適していません。」

高価な前のメッセージはそれを実装する方法を示していますが。

より新しいバージョンにアクセスすることもできます https://github.com/bassjobsen/Bootstrap-3-Typeahead

0
eton_ceb

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

showHintOnFocus:true
0
Raúl Martín

これが私の解決策です：

  • Init typeahead

    $（ "＃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('');
});
0
user1796655