My Typeahead.js / Bloodhound (0.11.1) doesn't work as expected. Out of the long list of json results provided, only some are displayed as suggestions.
For example, if I type los
in my field, I get only Lostorf
and nothing else, when there should be 4 selectable items displayed.
This is my code:
HTML
<div id="remote">
<input class="typeahead" type="text">
</div>
JS
var searchablePlaces = new Bloodhound({
datumTokenizer : Bloodhound.tokenizers.obj.whitespace("term"),
queryTokenizer : Bloodhound.tokenizers.whitespace,
remote : {
url : 'http://www.example.com/autocomplete/%QUERY/',
wildcard : '%QUERY',
filter : function(response) { return response.data.results; }
},
limit : 10
});
searchablePlaces.initialize();
$('#remote .typeahead').typeahead(
{
hint : true,
highlight : true,
minLength : 2
},
{
name : 'searchable-places',
displayKey : "term",
source : searchablePlaces.ttAdapter()
})
Json
{
"data": {
"query": "los",
"count": 4,
"results": {
"1": {
"term": "Losanna"
},
"2": {
"term": "Losone"
},
"3": {
"term": "Lostallo"
},
"4": {
"term": "Lostorf"
}
}
}
}
Do you see something wrong? Thanks!
This is to confirm that the issue is caused by this typehaead bug: https://github.com/twitter/typeahead.js/issues/1218
As suggested by joekur in the issue report, I solved replacing this:
rendered += suggestions.length;
that._append(query, suggestions.slice(0, that.limit - rendered));
With this:
suggestions = suggestions.slice(0, that.limit - rendered);
rendered += suggestions.length;
that._append(query, suggestions);
I marked my own question as duplicate of this: TypeAhead.js and Bloodhound showing an odd number of results It's the same problem, I just cannot find it before due to different wording
HTH.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With