Bootstrap tokenfield和Twitter typeahead下拉菜單未設置樣式

Question

我有一個與此類似的問題，但是我同時使用Tokenfield v0.12.1和Twitter typeahead v0.11.1 。 當我開始鍵入內容並顯示建議時，它們沒有設置樣式。 它顯示為純文本（如果我單擊建議，它將添加到輸入字段中）。 例如，如果我鍵入“ re”，則出現“紅色”的建議，但顯示未樣式化，如下所示：

{"_query":"re","value":"red","label":"red"}

我的CSS源文件

<link href="~/Content/bootstrap-tokenfield/tokenfield-typeahead.css" rel="stylesheet" />
<link href="~/Content/bootstrap-tokenfield/bootstrap-tokenfield.css" rel="stylesheet" />

我的JS源文件

<script src="~/Scripts/bootstrap-tokenfield.min.js"></script>
<script src="~/Scripts/typeahead.bundle.min.js"></script>
<script>
$(document).ready(function () {
    var engine = new Bloodhound({
        local: [{ value: 'red' }, { value: 'blue' }, { value: 'green' }, { value: 'yellow' }, { value: 'violet' }, { value: 'brown' }, { value: 'purple' }, { value: 'black' }, { value: 'white' }],
        datumTokenizer: function (d) {
            return Bloodhound.tokenizers.whitespace(d.value);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace
    });

    engine.initialize();

    $('#tokenfield-typeahead').tokenfield({
        typeahead: [null, {
            source: engine.ttAdapter()
        }]
    });
});
</script>

我的HTML

<input type="text" class="typeahead form-control" id="tokenfield-typeahead" />

我的摘錄如下所示。 請幫我做錯什么？

 $(document).ready(function() { var engine = new Bloodhound({ local: [{ value: 'red' }, { value: 'blue' }, { value: 'green' }, { value: 'yellow' }, { value: 'violet' }, { value: 'brown' }, { value: 'purple' }, { value: 'black' }, { value: 'white' }], datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); }, queryTokenizer: Bloodhound.tokenizers.whitespace }); engine.initialize(); $('#tokenfield-typeahead').tokenfield({ typeahead: [null, { source: engine.ttAdapter() }] }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/tokenfield-typeahead.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script> <div class="row"> <div class="col-lg-12"> <dl class="dl-horizontal"> <dt>Action Items:</dt> <dd> <div id="action-items"> <input type="checkbox" name="item1" value="item1"> Action Item 1<br> <form class="form-inline"> <div class="tokenfield form-group"> <input type="text" class="typeahead form-control" id="tokenfield-typeahead" /> </div> <button type="button" class="btn btn-default">Save</button> </form> <input type="checkbox" name="item2" value="item2"> Action Item 2<br> <input type="checkbox" name="item3" value="item3"> Action Item 3 </div> </dd> <hr /> </dl> </div> </div> 

Answer 1

例如，如果我鍵入“ re”，則出現“紅色”的建議，但顯示未樣式化，如下所示：

{ “_query”： “重”， “值”： “紅”？

為了避免這種情況，您需要將displayKey選項添加到tokenfield ：

$('#tokenfield-typeahead').tokenfield({
    typeahead: [null, {
        source: engine.ttAdapter(),
        displayKey: 'value'
    }]
});

 $(document).ready(function() { var engine = new Bloodhound({ local: [{ value: 'red' }, { value: 'blue' }, { value: 'green' }, { value: 'yellow' }, { value: 'violet' }, { value: 'brown' }, { value: 'purple' }, { value: 'black' }, { value: 'white' }], datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); }, queryTokenizer: Bloodhound.tokenizers.whitespace }); engine.initialize(); $('#tokenfield-typeahead').tokenfield({ typeahead: [null, { source: engine.ttAdapter(), displayKey: 'value' }] }); }); 

 .tt-query, .tt-hint { width: 396px; height: 30px; padding: 8px 12px; font-size: 24px; line-height: 30px; border: 2px solid #ccc; border-radius: 8px; outline: none; } .tt-query { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .tt-hint { display: none; } .tt-menu { width: 422px; margin-top: 12px; padding: 8px 0; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 8px; box-shadow: 0 5px 10px rgba(0,0,0,.2); } .tt-suggestion { padding: 3px 20px; font-size: 18px; line-height: 24px; } .tt-suggestion.tt-is-under-cursor { color: #fff; background-color: #0097cf; } .tt-suggestion p { margin: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/tokenfield-typeahead.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script> <div class="row"> <div class="col-lg-12"> <dl class="dl-horizontal"> <dt>Action Items:</dt> <dd> <div id="action-items"> <input type="checkbox" name="item1" value="item1"> Action Item 1<br> <form class="form-inline"> <div class="tokenfield form-group"> <input type="text" class="typeahead form-control" id="tokenfield-typeahead" /> </div> <button type="button" class="btn btn-default">Save</button> </form> <input type="checkbox" name="item2" value="item2"> Action Item 2<br> <input type="checkbox" name="item3" value="item3"> Action Item 3 </div> </dd> <hr /> </dl> </div> </div>