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

Answer 1

尝试使用第二个templates初始化对象的suggesstion，.typeahead()选项。见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创建可单击的动态链接

1 个答案: