这是我的HTML。
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-inline">
<span>Looking for</span>
<div class="form-group">
<input type="text" class="form-control typeahead" placeholder="Name or PersonID" autocomplete="off">
</div>
<button id="btn-go" class="btn btn-primary">Go</button>
</div>
</div>
</div>
这是我的 JavaScript 代码:
var people = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: 'contact/search/?id=%QUERY'
});
people.initialize();
$('.typeahead').typeahead(null, {
name: 'people',
displayKey: 'value',
source: people.ttAdapter(),
templates: {
suggestion: Handlebars.compile('<p><strong>{{fullname}}</strong> - {{personid}}</p>')
}
}).on('typeahead:selected', function(obj, datum) {
console.log(obj);
console.log(datum);
});
一切正常,服务器返回结果,下拉菜单填充完毕但不可见。看起来是CSS问题,需要帮助。为什么菜单被隐藏了?我已经检查过相关标签的"display"或"z-index"等基本属性,但都没有帮助。有什么想法吗?
顺便说一下,我正在使用bootstrap 3 typeahed css,可以在这里找到。
编辑:
找到了问题,请看我的回答。