我按照这里的说明用血猎犬实现了类型:http: //twitter.github.io/typeahead.js/examples/#bloodhound
这是我的HTML:
<div id="remote">
<input class="typeahead" type="text" placeholder="Search for cast and directors">
</div>
Run Code Online (Sandbox Code Playgroud)
这是我的js:
$(document).ready(function() {
var castDirectors = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: '../api/v1/search/people_typeahead',
remote: '../api/v1/search/people_typeahead?q=%QUERY',
dupDetector: function(remoteMatch, localMatch) {
return remoteMatch.value === localMatch.value;
}
});
castDirectors.initialize();
$('#remote .typeahead').typeahead(null, {
name: 'cast-directors',
displayKey: 'value',
source: castDirectors.ttAdapter(),
hint: false,
highlight: true,
templates: {
empty: [
'<div class="empty-message">',
'No matching names',
'</div>'
].join('\n'),
suggestion: Handlebars.compile('<a id="typeahead" href="{{link}}"><p>{{value}}</p></a>')
}
});
});
Run Code Online (Sandbox Code Playgroud)
但是,即使提示设置为false并且突出显示设置为true,我仍然会看到提示,而不是在预先输入中获得高亮显示.我应该改变什么?
我想在我的网站上实现具有typeahead功能的搜索,并按照此处的说明操作:http: //twitter.github.io/typeahead.js/examples/#custom-templates
但是,这些示例都将typeahead显示为文本,因此onclick只填充文本框.
对我来说,修改此内容的最佳方式是什么,以便点击建议实际链接到建议的页面?例如,typeahead返回3个对象:
我该怎么做才能让对象1..3返回,点击它们会让用户链接1..3?