使用 typeahead.js 创建可点击的动态链接

Question

我想将我的搜索自动完成 link 中的建议结果显示到网站上的特定餐厅。

注意： 我遇到了这个 post 但它使用了对象的静态数组。与此 post 不同，我希望从 服务器端 生成 link。

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 的建议，我找到了我的餐厅对象的 return 值，其中包括适当的 slug（即 blue-smoke）以 link 增加建议的结果。

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>"
      }
    }
  });

使用 typeahead.js 创建可点击的动态链接

Creating clickable dynamic links with typeahead.js

javascript

search

jquery

ruby-on-rails

typeahead.js