使用 typeahead.js 创建可点击的动态链接 [重复]

Question

我想这样做，以便在我的搜索自动完成链接中显示建议的结果，该链接指向网站上的特定餐厅。

注意：我遇到了这个post，但它使用了一个静态对象数组。与这篇文章不同，我希望从服务器端生成链接。

var links = [{name: "abc", link: "http://www.example1.com"}, 
             {name: "nbc", link: "http://www.example2.com"}];

var source = new Bloodhound({
  ...
  local: links
});

在我的例子中，我从 Rails 查询数据库，所以 name 将是餐厅的名称，link 将是 restaurant_path。根据我当前的代码，我该如何完成？如果需要任何其他代码，请告诉我。

$(function() {
  var restaurants = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: { 
      url: "/search/autocomplete?query=%QUERY",
      wildcard: "%QUERY"
    }
  });

  restaurants.initialize();

  $('#autocomplete').typeahead(null, {
    displayKey: 'name',
    source: restaurants.ttAdapter()
  });
});

我的餐厅路径目前的样子如下：

localhost:3000/restaurants/blue-smoke

更新：

根据 guest271314 的建议，我能够找到我的餐厅对象的返回值，其中包括适当的 slug（即blue-smoke）以链接建议的结果。

Answer 1

尝试使用第二个.typeahead() 初始化对象的templates、suggesstion 选项。见Typeahead examples - Custom Templates

$('#autocomplete').typeahead(null, {
    displayKey: 'name',
    source: restaurants.ttAdapter(),
    templates:{
      suggestion:function(data) {
        return "<a href=" + data.slug + ">"+ data.name +"</a>"
      }
    }
  });