29

Twitter Bootstrap TypeAhead を使用して、AutoComplete 機能を備えた DropDown List / < Select > HTML タグの動作が必要です。ここのリンクは、ユーザーが自分の入力も提供できるコンボボックスの機能を実現します。提供されたオプションからのみ選択するようにユーザーを制限したい。Twitter Bootstrap TypeAhead プラグインを調整して、DropDown List / Tag with Autocomplete Feature の動作をエミュレートする方法はありますか。

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

  1. Twitter ブートストラップの先行入力コンポーネントにドロップダウン ボタンを追加する
4

3 に答える 3

24

ブートストラップの先行入力を使用して、標準の SELECT 要素を非常にシームレスでスタイルの良いコンボ ボックスに変換するこの素晴らしいプラグインを見つけました。とても良さそうです。次のプロジェクトで使用します。

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

実際の例(Bootstrap 3)

于 2013-03-02T19:11:35.483 に答える
10

入力時にフィルター機能を維持するための davidkonrads answer の小さな改善。

$(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/

于 2012-12-11T08:45:59.037 に答える
6

一致した結果を強調表示したくない場合は、先行入力のJavaScriptを変更したり、変更されたコードを使用したりすることなく、非常に単純でさえ可能です。

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/の作業コード/例

于 2012-11-13T16:57:26.993 に答える