CODEWITHSUNDEEP
javascriptautocompletetypeaheadbloodhound
Dr. Z
Dr. Z

Reputation: 237

Typeahead autocomplete results not displaying

I'm trying to use the library typeahead.bundle.js (typeahead + bloodhound).

Here is my code :

  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()
    });
  });

Everything seems fine but there is no result displaying.

Can someone help me with that ?

Thanks !

Upvotes: 1

Views: 162

Answers (1)

davidkonrad
davidkonrad

Reputation: 85528

The comments were right, the URL (or actually the token) is invalid. With another token it works well, or sort of works. For cosmetic reasons I changed the response filtering to the more simple

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

But the main issue is 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/

Upvotes: 2

Related Questions