У меня есть приложение, которое использует 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'
});
});