Typeahead 自动完成结果不显示

Question

我正在尝试使用库 typeahead.bundle.js（typeahead + bloodhound）。

这是我的代码：

  var engine = new Bloodhound({
    datumTokenizer: function(datum) {
      return Bloodhound.tokenizers.whitespace(datum.name);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
      url: "https://api.mapbox.com/geocoding/v5/mapbox.places/%QUERY.json?country=fr&access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6IlhHVkZmaW8ifQ.hAMX5hSW-QnTeRCMAy9A8Q",
      wildcard: "%QUERY",
      rateLimitWait: 1000,
      filter: function(response) {
        return $.map(response.features, function(city) {
          return {
            name: city.place_name,
            longitude: city.geometry.coordinates[0],
            latitude: city.geometry.coordinates[1]
          }
        });
      }
    }
  });

  var promise = engine.initialize();

  promise.done(function() { 
    $(".typeahead").typeahead({
      minLength: 2,
      highlight: true,
      hint: false
    }, 
    {
      displayKey: "name",
      source: engine.ttAdapter()
    });
  });

一切正常，但没有结果显示。

有人可以帮我吗？

谢谢！

Answer 1

评论是对的，URL（或者实际上是令牌）无效。使用另一个令牌，它可以很好地工作，或者可以工作。出于美观原因，我将响应过滤更改为更简单

filter: function(response) {
  return response.features.map(function(city) {
    return {
      name: city.place_name,
        longitude: city.geometry.coordinates[0],
        latitude: city.geometry.coordinates[1]
      }
    })
  }
}

但主要问题是this bug, that is well known and surprisingly never has been corrected in the github repository (the twitter.js project seems to be more or less dead) - it is an issue that only occurs when using bloodhound and remote sources. Here is a version with the corrections implemented - and now it works - even in a fiddle -> http://jsfiddle.net/m2vLd2u4/

Typeahead 自动完成结果不显示

Typeahead autocomplete results not displaying

javascript

autocomplete

typeahead

bloodhound