web-dev-qa-db-ja.com

Twitter Bootstrap TypeAheadは、ドロップダウンリストのように機能します/オートコンプリート機能を使用してタグを選択します

ドロップダウンリストが欲しい/ <Select> Twitterを使用したオートコンプリート機能でのHTMLタグの動作Bootstrap TypeAhead。リンク here は、ユーザーができるコンボボックスの機能を実現します。提供されたオプションからのみ選択するようにユーザーを制限します。ドロップダウンリスト/タグの動作をエミュレートするために、Twitter Bootstrap TypeAheadプラグインをtweekする方法はありますかオートコンプリート機能。

投稿する前に次の質問を参照しました

  1. Twitterへのドロップダウンボタンの追加bootstrap typeaheadコンポーネント
javascriptjquerytwitter-bootstraptypeahead
28
Dinesh P.R.

bootstrap typeaheadを使用して、標準のSELECT要素を非常にシームレスで素敵なスタイルのコンボボックスに変換するこの素晴らしいプラグインを見つけました。

https://github.com/danielfarrell/bootstrap-combobox

ライブ例 （ブートストラップ3）

24
mike nelson

入力時にフィルター機能を維持するために、davidkonradsの回答が少し改善されました。

$(document).ready(function() {

$("#test").typeahead({
    "source": ['Pennsylvania', 'Connecticut', 'New York', 'Maryland', 'Virginia'],
    //match any item
    matcher: function(item) {
        if (this.query == '*') {
            return true;
        } else {
            return item.indexOf(this.query) >= 0;
        }
    },
    //avoid highlightning of "*"
    highlighter: function(item) {
        return "<div>" + item + "</div>"
    }
});

// "select"-button
$(".showAll").click(function(event) {
    var $input = $("#test");
    //add something to ensure the menu will be shown
    $input.val('*');
    $input.typeahead('lookup');
    $input.val('');
});

});

http://jsfiddle.net/d4kris/5rtGA/3/

10
d4kris

それは確かに可能です-非常に簡単です-先行入力JavaScriptを変更することなく/変更されたコードを使用して、[〜＃〜] if [〜＃〜]一致した結果を強調表示しないようにします。

HTML：

<input name="test" id="test"/>
<button id="emu-select" class="btn btn-small" type="button">
<i class="icon-arrow-down"></i>
</button>

スクリプト：

$(document).ready(function() {

    $("#test").typeahead({
        "source": ['Pennsylvania','Connecticut','New York','Maryland','Virginia'],
        //match any item
        matcher : function (item) {
            return true;
        },
        //avoid highlightning of "a"
        highlighter: function (item) {
            return "<div>"+item+"</div>"
        }
    });

    // "select"-button
    $("#emu-select").click(function(){
        //add something to ensure the menu will be shown
        $("#test").val('a');
        $("#test").typeahead('lookup');
        $("#test").val('');
    });
});

jsfiddleでの作業コード/例 http://jsfiddle.net/davidkonrad/ZJMBE/3/

6
davidkonrad