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
        }
        ...
    ]
}

使用Ajax的jQuery Typehead自定义模板

1 个答案: