我的代码
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
});
我的转换函数返回以下响应的功能部分，以便我可以从预先输入中访问 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 中的“值”。我也不确定 name: 参数在 typeahead 中的用途，因此我已将其排除在外。
预先感谢您的帮助
最佳答案
在使用这个插件几个小时并查看 github 上的问题之后，我得出的结论是这个插件支持很差并且漏洞百出。尽管它可能有很多星星，但它仍然存在 Unresolved 问题、未完成的拉取请求和糟糕的文档。此外，该存储库已超过 3 个月没有更新。我切换到 select2(jquery 插件)，我原本想要在一个小时内启动并运行的功能。 我不建议使用这个插件，因为支持很差而且问题也很突出。
关于javascript - Typeahead.js Bloodhound 忽略高质量结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31795909/