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>

我的网页

<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"："re"，"value"："red"...

为了避免这种情况，您需要在令牌字段中添加显示键选项：

$('#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>