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