我有一个使用Bootstrap 3和Typeahead的应用程序。由于某种原因,一旦我添加了Typeahead.js,样式就会被格式化错误,您可以通过这个JSFiddle看到。以下HTML看起来很好:
<div class="container" style="padding:3rem;">
<form class="form-horizontal">
<div class="form-group">
<div class="input-group">
<input type="search" class="form-control" id="myQuery">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span id="searchIndexButton">Item 1</span> <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
</div>
</form>
</div>
我刚刚使用下面所示的Typeahead进行初始化,结果看起来很糟糕。
$(function() {
var data = [
{ id:1, name:'Tiger' },
{ id:2, name:'Bear' }
];
var bh = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: data
});
$('#myQuery').typeahead(null, {
minLength: 1,
name: 'suggestions',
source: bh,
display: 'name'
});
});