Typeahead ajax自动完成不起作用

Question

我正试图从ajax数据中自动完成typeahead，但它不起作用。

这是我的密码。

• HTML

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

• Javascript

  $(document).ready(function)｛

  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=美国&地图视图=41.382995-74.301616；41.305715，-74.092278&query=

{"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)。

或者，如果您想检查几个属性，则需要返回一个像[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">