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

我想在我的搜索自动完成链接到网站上的特定餐厅的建议结果。

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

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建议，我能够找到我的餐厅对象的返回值，其中包括相应的slu（（即blue-smoke ）以链接建议的结果。

Answer 1

尝试使用第二个.typeahead()初始化对象的templates ， suggesstion选项。 请参见先行示例 – 自定义模板

 $('#autocomplete').typeahead(null, { displayKey: 'name', source: restaurants.ttAdapter(), templates:{ suggestion:function(data) { return ""+ data.name +"" } } });