如何在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>' 
        } 
       } 
      });