javascript - 使用 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 的建议，我能够找到我的餐厅对象的返回值，其中包括适当的段(即 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>"
      }
    }
  });