Typeahead ajaxオートコンプリートが機能していません

Question

ajaxデータからタイプアーヘッドのオートコンプリートを作成しようとしていますが、機能しません。

これは私のコードです。

• HTML

  <input type="search" class="typeahead" id="order_address" autocomplete="off"> 
  

• のJavascript

  $（ドキュメント）.ready（関数（）{

  var suggestions = new Bloodhound({ 
      remote: { 
       url: 'https://autocomplete.geocoder.api.here.com/6.2/suggest.json?app_id=...app_code=...&country=USA&mapview=41.382995,-74.301616;41.305715,-74.092278&query=%QUERY%', 
       wildcard: '%QUERY%', 
       filter: function (response) { 
        return response.suggestions; 
       } 
      }, 
      datumTokenizer: function(suggestions) { 
       return Bloodhound.tokenizers.whitespace(suggestions); 
      }, 
      queryTokenizer: Bloodhound.tokenizers.whitespace, 
  }); 
  
  $('#order_address').typeahead({ 
       hint: true, 
       highlight: true, 
       minLength: 1 
      }, 
      { 
       name: 'suggestions', 
       displayKey: function(suggestions) { 
        return suggestions.label; 
       }, 
       source: suggestions.ttAdapter() 
  }); 
  

  }）。

ブラウザのネットワークデータを調べているとき、以下のような提案データが正しく取得されています。

http://autocomplete.geocoder.api.here.com/6.2/suggest.json?app_id=...&app_code=...&country=USA&mapview=41.382995,-74.301616;41.305715,-74.092278&query=a

{"suggestions":[{"label":"United States Of America, NY, Cornwall, Angola Rd","language":"en","countryCode":"USA","locationId":"NT_7Cpok364jILgH4ksUcyjpC","address":{"country":"United States Of America","state":"NY","county":"Orange","city":"Cornwall","street":"Angola Rd","postalCode":"12518"},"distance":14896,"matchLevel":"street"},{"label":"United States Of America, NY, Garrison, Albany Post Rd","language":"en","countryCode":"USA","locationId":"NT_DM6n2RQmjZ1YvBjMS6MyGA","address":{"country":"United States Of America","state":"NY","county":"Putnam","city":"Garrison","district":"Garrison","street":"Albany Post Rd","postalCode":"10524"},"distance":23981,"matchLevel":"street"},{"label":"United States Of America, NY, Montrose, Albany Post Rd","language":"en","countryCode":"USA","locationId":"NT_NNt..Hu2Z5yXhvu4UpGXwA","address":{"country":"United States Of America","state":"NY","county":"Westchester","city":"Montrose","street":"Albany Post Rd","postalCode":"10548"},"distance":24394,"matchLevel":"street"},{"label":"United States Of America, NY, Croton-on-Hudson, Albany Post Rd","language":"en","countryCode":"USA","locationId":"NT_fokNpGY5GJxSkp195bkloA","address":{"country":"United States Of America","state":"NY","county":"Westchester","city":"Croton-on-Hudson","street":"Albany Post Rd","postalCode":"10520"},"distance":26329,"matchLevel":"street"}]} 

しかし、それはオートコンプリートのために働いていません。

ここで何ができますか？

Answer 1

suggestionsアレイのオブジェクトをフィルタリングするために使用するキーを、BloodhoundインスタンスのdatumTokenizerメソッドに含める必要があります。 Bloodhound.tokenizers.whitespaceの引数として提案を渡すのは、提案が文字列の配列である場合にのみ機能します。トークナイザは、最終的に照合できる文字列トークンに解決できる引数を期待しています。

提案配列内のラベルと照合する場合は、datumTokenizer関数をBloodhound.tokenizers.whitespace(suggestions.label)に変更する必要があります。

またはいくつかのプロパティをチェックする場合は、[Bloodhound.tokenizers.whitespace(suggestions.label), Bloodhound.tokenizers.whitespace(suggestions.language)]のようなトークナイザの配列を返す必要があります。

配列の1つのプロパティと2つのプロパティの一致の例については、以下のスニペットを参照してください。

$(document).ready(function() { 
 

 
const data = {"suggestions":[{"label":"United States Of America, NY, Cornwall, Angola Rd","language":"en","countryCode":"USA","locationId":"NT_7Cpok364jILgH4ksUcyjpC","address":{"country":"United States Of America","state":"NY","county":"Orange","city":"Cornwall","street":"Angola Rd","postalCode":"12518"},"distance":14896,"matchLevel":"street"},{"label":"United States Of America, NY, Garrison, Albany Post Rd","language":"en","countryCode":"USA","locationId":"NT_DM6n2RQmjZ1YvBjMS6MyGA","address":{"country":"United States Of America","state":"NY","county":"Putnam","city":"Garrison","district":"Garrison","street":"Albany Post Rd","postalCode":"10524"},"distance":23981,"matchLevel":"street"},{"label":"United States Of America, NY, Montrose, Albany Post Rd","language":"en","countryCode":"USA","locationId":"NT_NNt..Hu2Z5yXhvu4UpGXwA","address":{"country":"United States Of America","state":"NY","county":"Westchester","city":"Montrose","street":"Albany Post Rd","postalCode":"10548"},"distance":24394,"matchLevel":"street"},{"label":"United States Of America, NY, Croton-on-Hudson, Albany Post Rd","language":"en","countryCode":"USA","locationId":"NT_fokNpGY5GJxSkp195bkloA","address":{"country":"United States Of America","state":"NY","county":"Westchester","city":"Croton-on-Hudson","street":"Albany Post Rd","postalCode":"10520"},"distance":26329,"matchLevel":"street"}]}; 
 

 
var suggestions = new Bloodhound({ 
 
    local: data.suggestions, 
 
    datumTokenizer: function(suggestions) { 
 
     return Bloodhound.tokenizers.whitespace(suggestions.label); 
 
    }, 
 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
 
}); 
 

 
var suggestions2 = new Bloodhound({ 
 
    local: data.suggestions, 
 
    datumTokenizer: function(s) { 
 
     return ['countryCode','matchLevel'].reduce(function(p,c) { 
 
     return p.concat(Bloodhound.tokenizers.whitespace(s[c])) 
 
     }, []); 
 
    }, 
 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
 
}); 
 

 

 
$('#order_address').typeahead({ 
 
     hint: true, 
 
     highlight: true, 
 
     minLength: 1 
 
    }, 
 
    { 
 
     name: 'suggestions', 
 
     displayKey: function(suggestions) { 
 
      return suggestions.label; 
 
     }, 
 
     source: suggestions.ttAdapter() 
 
}); 
 

 

 
$('#order_address2').typeahead({ 
 
     hint: true, 
 
     highlight: true, 
 
     minLength: 1 
 
    }, 
 
    { 
 
     name: 'suggestions2', 
 
     displayKey: function(suggestions) { 
 
      return suggestions.label; 
 
     }, 
 
     source: suggestions2.ttAdapter() 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script> 
 
<p>Matches against label only</p> 
 
<input type="search" class="typeahead" id="order_address" autocomplete="off"> 
 

 
<p>Matches against countryCode and matchLevel</p> 
 
<input type="search" class="typeahead" id="order_address2" autocomplete="off">