Typeahead ajax 自动完成功能不起作用

Question

我正在尝试从 ajax 数据中进行预先输入自动完成，但它不起作用。

这是我的代码。

• 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=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)。

或者，如果您想检查多个属性，则需要返回一个标记器数组，例如 [Bloodhound.tokenizers.whitespace(suggestions.label), Bloodhound.tokenizers.whitespace(suggestions.language)]。

参见下面的 sn-p 匹配数组的一个和两个属性的示例。

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