使用Ajax使用jQuery Typehead的自定义模板

Question

这就是我到目前为止所尝试的，它在没有自定义模板的情况下工作得很好。然而，我需要在搜索结果中显示一些更多的数据，如图像等。如何在调用AJAX的同时调用自定义模板？

<input type="text" class="site-search" name="search">

var path = "{{ route('site-search') }}";

$('input.site-search').typeahead({
  hint: true,
  highlight: true,
  display: 'value',
  source: function (query, process) {
    return $.get(path, { query: query }, function (data) {
      return process(data);
    });
  }
});

Answer 1

参见the docs。只需创建模板函数并使用|raw修饰符显示干净的、非转义的html即可。

display: "series",
template: function (query, item) {
    var template = '<span data-series="{{series|raw}}">' +
        '{{series}}, {{seasons}} seasons -' +
        '<var data-rating="{{rating|raw}}">{{rating}}/10</var></span>'

    if (item.rating >= 9) {
        template += '<span class="ribbon">Top Rated</span>';
    }
    return template;
},
source: {
    data: [
        {
            series: "Breaking Bad",
            seasons: 5,
            rating: 9.6
        }
        ...
    ]
}