更新时间:2023-02-05 12:31:57
这似乎是typeahead.js的新版本中的>众所周知的错误.为了使您的代码正常工作,您宁愿切换到版本 0.10.5 或更低的版本,并稍微转换一下代码:
var places = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/api/place/?country={{ country.id }}&name=%QUERY',
wildcard: '%QUERY',
filter: function(data) { // <-- should use `filter`
return data.response;
}
}
});
places.initialize(); // <-- initialise suggestion
$('.typeahead-place').typeahead({
hint: true,
highlight: true,
minLength: 2
}, {
name: 'places',
source: places.ttAdapter(), // <-- get adapter as a source
displayKey: function(obj) {
// ...
}
});
演示: https://jsfiddle.net/uszcp6j3/ >
或者,如果您希望坚持使用最新版本,则可以应用以下 ,它是在不久前发布的typeahead.js
源代码.
I'm having troubles getting typeahead.js to return/render all my results on my page. Here is my code:
var places = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/api/place/?country={{ country.id }}&name=%QUERY'
, transform: function (data) {
return data.response;
}
, wildcard: '%QUERY'
}
});
var selected = false;
$('.typeahead-place').typeahead({
hint: true,
highlight: true,
minLength: 2
},
{
name: 'places',
displayKey: function (obj) {
if (obj.url != null && obj.url.length && (obj.street == null || obj.street.length == 0)) {
return obj.name + " (Online store)";
}
return obj.name + " (" + obj.street + ", " + obj.city + ", " + obj.postcode + ")";
},
source: places
});
Example query of Punn
gives me back the JSON from the server as:
{
"response": [
{
"id": "4",
"name": "Punnitse ja Säästä 2",
"street": "Simonkenttä, Simonkatu 9",
"city": "Helsinki",
"postcode": "00100",
"url": "http://www.punnitse.fi/"
},
{
"id": "12",
"name": "Punnitse ja Säästä 3",
"street": "Simonkenttä, Simonkatu 9",
"city": "Helsinki",
"postcode": "00100",
"url": "http://www.punnitse.fi/"
},
{
"id": "13",
"name": "Punnitse ja Säästä 4",
"street": "Simonkenttä, Simonkatu 9",
"city": "Helsinki",
"postcode": "00100",
"url": "http://www.punnitse.fi/"
},
{
"id": "9",
"name": "Punnitse ja Säästä Kamppi",
"street": "Simonkenttä, Simonkatu 9",
"city": "Helsinki",
"postcode": "00100",
"url": "http://www.punnitse.fi/"
}
]
}
Right now this renders as so:
This appears to be a well-known bug of the new version of typeahead.js
. In order to make your code working correctly, you'd rather switch to version 0.10.5 or lower, and slightly transform your code:
var places = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/api/place/?country={{ country.id }}&name=%QUERY',
wildcard: '%QUERY',
filter: function(data) { // <-- should use `filter`
return data.response;
}
}
});
places.initialize(); // <-- initialise suggestion
$('.typeahead-place').typeahead({
hint: true,
highlight: true,
minLength: 2
}, {
name: 'places',
source: places.ttAdapter(), // <-- get adapter as a source
displayKey: function(obj) {
// ...
}
});
DEMO: https://jsfiddle.net/uszcp6j3/
Alternatively, if you want to stick to the latest version, you can apply the following patch, which was released some time ago, to the source code of the typeahead.js
.