Typeahead.js带有可点击的链接

Question

我想在我的网站上实现具有typeahead功能的搜索，并按照此处的说明操作： http ： //twitter.github.io/typeahead.js/examples/#custom-templates

但是，这些示例都将typeahead显示为文本，因此onclick只填充文本框。

对我来说，修改此内容的最佳方式是什么，以便点击建议实际链接到建议的页面？ 例如，typeahead返回3个对象：

• 对象1：链接1
• 对象2：链接2
• 对象3：链接3

我该怎么做才能让对象1..3返回，点击它们会让用户链接1..3？

Answer 1

在http://jsfiddle.net/2RNFj/3/中写一个简单的例子

您只需提供对象并将其提供给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>')
  }
});