未显示预先输入自动填充结果

时间:2016-01-03 22:12:08

标签: javascript autocomplete typeahead bloodhound

我试图使用库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()
    });
  });

一切似乎都很好,但没有结果显示。

有人可以帮我吗?

谢谢!

1 个答案:

答案 0 :(得分:2)

评论是正确的,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,这是众所周知的,并且令人惊讶地从未在github存储库中得到纠正( twitter.js项目似乎或多或少死了) - 这是一个只有在使用猎犬和远程资源时才会出现的问题。这是一个version with the corrections implemented - 现在它可以工作 - 即使是小提琴 - >的 http://jsfiddle.net/m2vLd2u4/