Typeahead.js 올바르게 렌더링하지 않을 것을 제안하십시오.

Question

Typeahead.js 플러그인을 사용하고 있습니다. 제안에 대한 사용자 지정 템플릿을 만들려고합니다. 현재 다음과 같습니다.

var suggestions = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    remote: '/api/suggests?querytext=%QUERY' 
}); 
suggestions.initialize(); 

$(document).ready(function() { 
    $('input.typeahead').typeahead(
    { minLength: 3 }, 
    { 
     name: 'suggestions', 
     source: suggestions.ttAdapter(), 
     templates: { 
     suggestion: function(data) { 
      var str = ''; 
      str += '<div>Result: '; 
      // if suggestion is a Customer show 1 icon and the Name 
      // elseif suggestion is a Product show a different icon and the name   
      str += '</div>'; 
      return str; 
     } 
     } 
    } 
); 
}); 

제안 사항이 표시됩니다. 그러나 실제로 내 결과 내부에서 속성 값을 가져올 수 없습니다.

{ 
    "Results":[ 
    { 
     "Type":"Customer", 
     "Id":5, 
     "Name":"Bill", 
     "LastUpdated":"01-01-2015" 
    }, 
    { 
     "Type":"Customer", 
     "Id":135, 
     "Name":"Billows", 
     "LastUpdated":"01-02-2015", 
    }, 
    { 
     "Type":"Product", 
     "Id":241, 
     "Name":"Bill Check", 
     "LastUpdate":"01-04-2015" 
    } 
    ], 
    "TotalResults":3, 
    "TotalCustomers":2, 
    "TotalProducts":1 
} 

가 어떻게 템플릿에 하나의 제안에 대한 개별 Name 및 Type 값을받을 수 있나요 그래서 제대로 렌더링 할 수 있습니다 블러드 하운드는 제안을 요청하면, 내가 다시 결과 세트가이처럼 보이는거야?

감사합니다.

Answer 1

이

var suggestions = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    remote: { 
     url: '/api/suggests?querytext=%QUERY', 
     filter: function(list) { 
      var suggestions = list.Results; 
      return $.map(suggestions, function(suggestion) { return { Type: suggestion.Type, Id: suggestion.Id, Name: suggestion.Name, LastUpdated: suggestion.LastUpdated }; }); 
     } 
    } 
}); 
suggestions.initialize(); 

$(document).ready(function() { 
    $('input.typeahead').typeahead(
      { minLength: 3 }, 
      { 
       name: 'suggestions', 
       source: suggestions.ttAdapter(), 
       templates: { 
        suggestion: function (data) { 
         var str = ''; 
         str += '<div>Result: '; 
         // get value by data.Type data.Name 
         str += '</div>'; 
         return str; 
        } 
       } 
      } 
    ); 
});