如何在twitter typehead/bloodhound的建議中顯示多個返回的值？

Question

我試圖使用bloodhound和typeahead來創建一個自動完成。被正確返回的數據，但作爲undefined 我的代碼在選項中顯示的是：

HTML：

<form class="typeahead" role="search"> 
     <div class="form-group"> 
      <input type="search" name="q" class="form-control search-input" placeholder="Search" autocomplete="off"> 
     </div> 
</form> 

的Javascript：

var engine = new Bloodhound({ 
       remote: { 
        url: '{{ route('search') }}?query=%QUERY', 
        wildcard: '%QUERY' 
       }, 
       datumTokenizer: Bloodhound.tokenizers.whitespace('name'), 
       queryTokenizer: Bloodhound.tokenizers.whitespace 
      }); 

      $(".search-input").typeahead({ 
       hint: true, 
       highlight: true, 
       minLength: 1 
      }, { 
       source: engine.ttAdapter(), 

       // This will be appended to "tt-dataset-" to form the class name of the suggestion menu. 
       name: 'profileList', 

       // the key from the array we want to display (name,slug...) 
       templates: { 
        empty: [ 
         '<div class="list-group search-results-dropdown"><div class="list-group-item">Nothing found.</div></div>' 
        ], 
        header: [ 
         '<div class="list-group search-results-dropdown">' 
        ], 
        suggestion: function (data) { 
         var profile = []; 
         profile.push(data); 
         console.log(profile); 

         return '<a href="' + data.slug + '" class="list-group-item">' + data.name + '</a>' 
        } 
       } 
      }); 

當我console.log(data)我得到2個結果這一下像這樣：

Hello Molly 
hello-molly-436057803095647 

但值顯示爲undefined。從後端返回的數據是這樣的：

{"name":"Hello Molly","slug":"hello-molly-436057803095647"} 

我想顯示name和slug這樣的：return '<a href="' + data.slug + '" class="list-group-item">' + data.name + '</a>'作爲建議。我怎樣才能做到這一點？

Answer 1

對於其他任何人卡住我不得不創建一個轉換功能：

transform: function(response) { 
        return $.map(response, function (profile) { 
         return { 
          name: profile.name, 
          slug: profile.slug 
         } 
        }); 
       }, 

繪製出JSON響應。此外，如果您使用大量的瀏覽器緩存清除緩存，因爲這可以阻止更新的JavaScript。

全碼：

var engine = new Bloodhound({ 
       remote: { 
        url: '{{ route('search') }}?query=%QUERY', 
        wildcard: '%QUERY', 
        transform: function(response) { 
         return $.map(response, function (profile) { 
          return { 
           name: profile.name, 
           slug: profile.slug 
          } 
         }); 
        }, 
       }, 
       datumTokenizer: Bloodhound.tokenizers.whitespace('name', 'slug'), 
       queryTokenizer: Bloodhound.tokenizers.whitespace 

      }); 

      engine.initialize(); 

      $(".search-input").typeahead({ 
       hint: true, 
       highlight: true, 
       minLength: 1, 
       displayKey: 'name', 
      }, { 
       source: engine.ttAdapter(), 

       // This will be appended to "tt-dataset-" to form the class name of the suggestion menu. 
       name: 'profileList', 

       // the key from the array we want to display (name,id,email,etc...) 
       templates: { 
        empty: [ 
         '<div class="list-group search-results-dropdown"><div class="list-group-item">Nothing found.</div></div>' 
        ], 
        header: [ 
         '<div class="list-group search-results-dropdown">' 
        ], 
        suggestion: function (data) { 
         return '<a href="' + data.slug + '" class="list-group-item">' + data.name + '</a>' 
        } 
       } 
      });