My code
var streetAddress = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: 'https://api.mapbox.com/v4/geocode/mapbox.places/%QUERY.json?proximity=-74,45&access_token=pk.********.********',
wildcard: '%QUERY',
prepare: function (query, settings) {
//Just a function to remove an ajax header 'X-CSRF-TOKEN'
startRequest();
settings.url = settings.url.replace('%QUERY', encodeURI(query));
return settings;
},
transform: function (response) {
//Just a function to add back the removed ajax header
endRequest();
return response.features;
}
}
});
var test = $('#address-search .typeahead').typeahead({
hint: false,
highlight: false,
minLength: 1
},
{
display: 'place_name',
source: streetAddress
});
My transform function is returning the features part of the below response so that I can access the place_name parameter from the typeahead.
The data from my query
{
"type":"FeatureCollection",
"query":[
"1600",
"pennsylvania",
"ave"
],
"features":[
{
"id":"address.170282823806239",
"type":"Feature",
"text":"Pennsylvania Ave NW",
"place_name":"1600 Pennsylvania Ave NW, Washington, 20006, District of Columbia, United States",
"relevance":0.99,
"center":[
-77.036698,
38.897102
],
"geometry":{
"type":"Point",
"coordinates":[
-77.036698,
38.897102
]
},
"bbox":[
-77.05781199999998,
38.89252299999999,
-77.01844799999999,
38.905058999999994
],
"address":"1600",
"properties":{
},
"context":[
{
"id":"place.10719",
"text":"Washington"
},
{
"id":"postcode.757789931",
"text":"20006"
},
{
"id":"region.1190806886",
"text":"District of Columbia"
},
{
"id":"country.4150104525",
"text":"United States"
}
]
},
{
"id":"address.42492466560022",
"type":"Feature",
"text":"Pennsylvania Ave",
"place_name":"1600 Pennsylvania Ave, Baltimore, 21217, Maryland, United States",
"relevance":0.99,
"center":[
-76.634388,
39.30307
],
"geometry":{
"type":"Point",
"coordinates":[
-76.634388,
39.30307
]
},
"bbox":[
-76.64626799999999,
39.295034999999984,
-76.62387699999998,
39.313258999999995
],
"address":"1600",
"properties":{
},
"context":[
{
"id":"place.10950",
"text":"Baltimore"
},
{
"id":"postcode.1084729612",
"text":"21217"
},
{
"id":"region.928365533",
"text":"Maryland"
},
{
"id":"country.4150104525",
"text":"United States"
}
]
},
{
"id":"address.67278193792769",
"type":"Feature",
"text":"Pennsylvania Ave",
"place_name":"1600 Pennsylvania Ave, Miami Beach, 33139, Florida, United States",
"relevance":0.99,
"center":[
-80.13459,
25.789245
],
"geometry":{
"type":"Point",
"coordinates":[
-80.13459,
25.789245
]
},
"bbox":[
-80.13474099999999,
25.776914999999992,
-80.13365999999999,
25.789956999999994
],
"address":"1600",
"properties":{
},
"context":[
{
"id":"place.14360",
"text":"Miami Beach"
},
{
"id":"postcode.260297597",
"text":"33139"
},
{
"id":"region.3998021366",
"text":"Florida"
},
{
"id":"country.4150104525",
"text":"United States"
}
]
},
{
"id":"address.179234355186041",
"type":"Feature",
"text":"Pennsylvania Ave S",
"place_name":"1600 Pennsylvania Ave S, Minneapolis, 55426, Minnesota, United States",
"relevance":0.99,
"center":[
-93.376595,
44.967257
],
"geometry":{
"type":"Point",
"coordinates":[
-93.376595,
44.967257
]
},
"bbox":[
-93.37759599999998,
44.93132099999999,
-93.37223099999997,
44.970254999999995
],
"address":"1600",
"properties":{
},
"context":[
{
"id":"place.20936",
"text":"Minneapolis"
},
{
"id":"postcode.2607442246",
"text":"55426"
},
{
"id":"region.4222030107",
"text":"Minnesota"
},
{
"id":"country.4150104525",
"text":"United States"
}
]
},
{
"id":"address.243590068555079",
"type":"Feature",
"text":"Pennsylvania Ave",
"place_name":"1600 Pennsylvania Ave, Hartshorne, 74547, Oklahoma, United States",
"relevance":0.99,
"center":[
-95.54508,
34.841595
],
"geometry":{
"type":"Point",
"coordinates":[
-95.54508,
34.841595
]
},
"bbox":[
-95.57070949999998,
34.84120059999999,
-95.54433509999997,
34.85049019999999
],
"address":"1600",
"properties":{
},
"context":[
{
"id":"place.27314",
"text":"Hartshorne"
},
{
"id":"postcode.4130057309",
"text":"74547"
},
{
"id":"region.1788423601",
"text":"Oklahoma"
},
{
"id":"country.4150104525",
"text":"United States"
}
]
}
],
"attribution":"NOTICE: You may cache this data for up to 30 days. © 2015 Mapbox and its suppliers. All rights reserved. Use of this data is subject to the Mapbox Terms of Service. (https://www.mapbox.com/about/maps/)"
}
The issue I'm having is that Bloodhound throws out all of these results. Similarly, if I use a query of "3360", then it will only display one result. What am I doing wrong to get the lousy results?
I can also add that I don't know what certain parameters mean, such as whether or not I should change 'value' in the datumTokenizer. I was also unsure of what the name: parameter is used for in typeahead, and I have excluded it.
Thanks in advance for your help
After playing around with the plugin for hours and looking through issues on github, I've come to the conclusion that this plugin is poorly supported and is bug-ridden. Although it may have many stars, it has open issues, outstanding pull requests, and poor documentation. Additionally, the repository has not been updated in over 3 months. I switched to select2 (jquery plugin), and I had what I originally wanted to get up and running functional within an hour. I would not recommend using this plugin because of the poor support and outstanding issues.