複数の返された値をtwitter typeahead/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>'を。どうやってやるの？

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

JSONレスポンスをマップするために：私は変換関数を作成する必要がありました立ち往生、誰のために

Answer 1

。また、多くのブラウザキャッシュを使用してキャッシュをクリアした場合、これは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>' 
        } 
       } 
      });