Typeahead always shows only 5 suggestions maximum

typeahead show all results
bootstrap typeahead limit
typeahead not showing all results
bloodhound typeahead
typeahead highlight
bootstrap typeahead default suggestions
jquery typeahead
typeahead display

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:

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

javascript, 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​  Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor. Typeahead always shows only 5 suggestions maximum - JSFiddle - Code Playground Close

In my case 'limit' option worked but in different way. I had to put limit option on typeahead instead of Bloodhound. I am posting my case, so that it might help someone.

bloodhoundSuggestionEngine = new Bloodhound({
datumTokenizer : function(d) {
return Bloodhound.tokenizers.whitespace(d.key);
},
queryTokenizer : Bloodhound.tokenizers.whitespace,
local : myOptions
});

$("#myinputbox").typeahead({
minLength : 3,
highlight : true
}, {
displayKey : 'key',
source : bloodhoundSuggestionEngine.ttAdapter(),
limit: 10
});

Typeahead always shows only 5 suggestions maximum, Map the remote source JSON array to a JavaScript object array. 11. return $.map(​movies.results, function (movie) {. 12. return {. 13. value: movie.original_title. 14. };. That was really helpful! Everything works great, except it only gives me 5 maximum suggestions. Typeahead always shows only 5 suggestions maximum. 1.

Apart from adding the limit for Bloodhound instantiation as suggested by @Fresh, I did the below styling in CSS to get the desired result.

.tt-suggestions {
  min-height: 300px;
  max-height: 400px;  
  overflow-y: auto;
}

What I made is to force the container to 400px so that I get a scroll bar when there are more results. I wanted this approach because, I didn't want the screen to take more area. This will work even if there are 100 results.. and will not block the screen.

Unable to display more than 5 results with Bloodhound (0.11.1 , of Typeahead.js with Bloodhound I'm unable to display more than 5 Do you have an example showing how to set limit in configuration as  Backport of geonetwork#3332. When the server returns less suggestions than what is configured as limit for the autocompleter, it only shows the first one, not adding the others to the suggestions list. This is a bug detected in Typeahead library, see twitter/typeahead.js#1232.

In Typeahead version 0.11.1:

Specify "limit" during the instantiation of the typeahead object to set the number of suggestions to display but make sure it is one less than than the maximum number your source returns.

// Instantiate the Typeahead UI
$('.typeahead').typeahead(null, {
    limit: 9, // one less than your return value. This controls the number of suggestions displayed
    displayKey: 'value',
    source: movies
});

see https://github.com/twitter/typeahead.js/issues/1201

typeahead not showing all results if less than limit · Issue #1232 , Zero results are shown when limit is equal to number of suggestions, 1 result When the result set is e.g. 5, it's only showing the first 2 etc. When initializing a typeahead using the typeahead.js jQuery plugin , you pass the plugin method one or more datasets. The source of a dataset is responsible for computing a set of suggestions for a given query. For more advanced use cases, rather than implementing the source for your dataset yourself, you can take advantage of Bloodhound, the

Another way might be is to change defaults in Typeahead class directly.

$.fn.typeahead.defaults = { ... items: 8, ...}

to

items: 'all'

max Typeahead always shows only 5 suggestions maximum?, .tt-suggestions { min-height: 300px; max-height: 400px; overflow-y: auto; }. Apart from adding the limit for Bloodhound instantiation as suggested by @Fresh, I did​  if remote dataset returns 20, and limit is set to 20, nothing shows. if limit set to 19, then 19 show. If dataset returns 11, limit set to 20, then 9 show. If dataset returns 12, limit set to 20, then 8 show.

typeahead.js – examples, When initializing a typeahead using the typeahead.js jQuery plugin, you pass the The source of a dataset is responsible for computing a set of suggestions for a Remote data is only used when the data provided by local and prefetch is Default suggestions can be shown for empty queries by setting the minLength  Hi guys, We're using Typahead for our search feature and I was wondering if there is a way that one can configure Typeahead so that as soon as a user focuses on the search bar, it will show a suggestion for "Advanced search".

Typeahead always shows only 5 suggestions maximum, 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  Typeahead always shows only 5 suggestions maximum #1 is the latest version. http://stackoverflow.com/questions/23981704/typeahead-always-shows-only-5-suggestions

Implementing Twitter Typeahead - GRTech Student Blog, 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  Will be attempting to work around this shortly. As mentioned by @aswitalski in #889 this is a usability problem for mobile devices. Hiding an on-screen keyboard triggers losing focus in some browsers, but you need to extra screen space to scan the typeahead menu easily.

Comments
  • Thanks for the link. I have already seen this. What I wanted is to have a scroll bar when there are more items. Total limit = 10 and display = 5 items. for remaining items we should use the scroll bar.
  • What you expect is not implemented by typeahead. My answer will allow you to increase the count which is the only way you can achieve this at the moment.
  • OK, glad you found a solution. You should answer your own question to help others who have the same problem.
  • @CJRamki You could get the size of your remote data set and then use this value when instantiating Bloodhound. However, why would you want to do this, as returning all the data will slow down the page as you'll need to retrieve all the data?
  • Version 0.11.1 - limit is not an option on BloodHound . sufficient is an option , but that is for firing remote to backfill suggestions. If you are using bloodhound + TT then use limit in TT 'dataset` option to control suggestions
  • IIRC, since 0.11 of bloodhound, limit was removed as an option. I think is only an option on typeahead
  • seems like they keep changing it back and forth