I have the below code using Typeahead.js for suggestions. I have no major issues on the code as it works fine.
The minor issue I face is that any given time, I see only 5 suggestions even though there are more than 5 suggestions from the remote URL.
var isearch = new Bloodhound({
datumTokenizer: function(d) {
return Bloodhound.tokenizers.whitespace(d.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: "http://localhost/search/get-data/%QUERY"
});
isearch.initialize();
$("#search_box .typeahead").typeahead(null,{ name: "isearch",
displayKey: "value",
source: isearch.ttAdapter(),
templates: {
suggestion: Handlebars.compile("{{value}}")
}
});
What I expect is that there are more suggestions, there should be a scroll bar for users to see.
In Typeahead version 0.11.1:
Specify "limit" during the instantiation of the typeahead object to set the number of suggestions to display e.g.
// Instantiate the Typeahead UI
$('.typeahead').typeahead(null, {
limit: 10, // This controls the number of suggestions displayed
displayKey: 'value',
source: movies
});
See a working example here:
http://jsfiddle.net/Fresh/ps4w42t4/
In Typeahead version 0.10.4.
The Bloodhound suggestion engine has a default value of five for the "limit" option (i.e. The max number of suggestions to return from Bloodhound#get)
You can increase the limit by specifying the desired value when you instantiate your Bloodhound object. For example, to specify a limit of 10:
var isearch = new Bloodhound({
datumTokenizer: function(d) {
return Bloodhound.tokenizers.whitespace(d.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: "http://localhost/search/get-data/%QUERY",
limit: 10
});
An example of an instance of Typeahead where the limit is set to 10 can be found here: