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