Typeahead ajax自動完成功能無法正常工作

Question

我試圖從ajax數據創建自動完成功能，但它不工作。

這是我的代碼。

• HTML

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

• 的Javascript

  $（文件）。就緒（函數（）{

  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

您需要在Bloodhound實例的datumTokenizer方法中包含要用於從suggestions數組中篩選對象的密鑰。傳遞建議作爲Bloodhound.tokenizers.whitespace的參數只有在建議是字符串數組時纔會起作用 - 標記器期望可以最終解析爲可以匹配的字符串標記的參數。

如果您想與建議數組中的標籤匹配，則需要更改datumTokenizer函數以返回Bloodhound.tokenizers.whitespace(suggestions.label)。

或者，如果您想檢查幾個屬性，則需要返回一個tokenizers數組，如[Bloodhound.tokenizers.whitespace(suggestions.label), Bloodhound.tokenizers.whitespace(suggestions.language)]。

請參閱下面的片段以查看數組匹配一個和兩個屬性的示例。

$(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">