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