[英]Typeahead.js with clickable links
I want to implement a search with typeahead functionality on my site and followed the instructions here: http://twitter.github.io/typeahead.js/examples/#custom-templates 我想在我的网站上实现具有typeahead功能的搜索,并按照此处的说明操作: http : //twitter.github.io/typeahead.js/examples/#custom-templates
However, the examples all show the typeahead as text so onclick just fills in the textbox. 但是,这些示例都将typeahead显示为文本,因此onclick只填充文本框。
What's a best way for me to modify this so that onclick the suggestions actually links to a page for the suggestion? 对我来说,修改此内容的最佳方式是什么,以便点击建议实际链接到建议的页面? Eg typeahead returns 3 objects:
例如,typeahead返回3个对象:
What should I do to have object 1..3 returned, and clicking on them takes user to link 1..3? 我该怎么做才能让对象1..3返回,点击它们会让用户链接1..3?
Write an simple example in http://jsfiddle.net/2RNFj/3/ 在http://jsfiddle.net/2RNFj/3/中写一个简单的例子
You just need to provide the objects and supply it to Bloodhound
to set the source of typehead
: 您只需提供对象并将其提供给
Bloodhound
以设置typehead
的来源:
var links = [{name: "abc", link: "http://www.example1.com"},
{name: "nbc", link: "http://www.example2.com"}];
var source = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: links
});
source.initialize();
$('#custom-templates .typeahead').typeahead(null, {
name: 'matched-links',
displayKey: 'name',
source: source.ttAdapter(),
templates: {
empty: [
'<div class="empty-message">',
'unable to find any Best Picture winners that match the current query',
'</div>'
].join('\n'),
suggestion: Handlebars.compile('<p><a href="{{link}}">{{name}}</a></p>')
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.