我的代码
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
});
我的转换函数返回以下响应的feature部分，以便我可以从typeahead访问place_name参数。
我的查询中的数据
{
"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/)"
}
我遇到的问题是Bloodhound抛弃了所有这些结果。同样，如果我使用“3360”的查询，那么它只会显示一个结果。得到糟糕的结果我做错了什么？
我还可以补充一点，我不知道某些参数是什么意思，比如我是否应该更改datumTokenizer中的'value'。我也不确定名称：参数在typeahead中的用途，我已将其排除在外。
提前感谢您的帮助
答案 0 :(得分：3)
在玩了几个小时的插件并查看github上的问题后，我得出的结论是这个插件支持不足而且是错误的。虽然它可能有很多明星，但它有开放的问题，出色的拉取请求和糟糕的文档。此外，存储库尚未在3个月内更新。我切换到select2（jquery插件），我有一个小时内我想要起床并运行功能的东西。 我不建议使用此插件，因为支持不佳和突出问题。