Question

152

Typeahead always shows only 5 suggestions maximum

rated 0 times [ 153] [ 1] / answers: 1 / hits: 37406 / 10 Years ago, sun, june 1, 2014, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

gideons

Add To Favorites

Follow

Total Points: 197

Total Questions: 106

Total Answers: 108

Location: Moldova

Member since Sat, Jan 29, 2022

2 Years ago

answered 10 Years ago jazminuniquer · Accepted Answer

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:

http://jsfiddle.net/Fresh/w03a28h9/