Typeahead always shows only 5 suggestions maximum

Question

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.

Pyoid

Answer 1

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/

Tildatilde

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. – Pyoid

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. – Tildatilde

I played with CSS and finally got it. Thanks. – Pyoid

OK, glad you found a solution. You should answer your own question to help others who have the same problem. – Tildatilde

Sure. I am just experimenting more. I will post the solution once I get it fine. – Pyoid

I posted my answer :) – Pyoid

is there any way to show suggestions without any limit? – Digraph

@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? – Tildatilde

yeah need to show all suggestion as user client requirement. So only. thanks for your reply. :) – Digraph

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 – Superfecundation

Answer 2

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
});

Flournoy

IIRC, since 0.11 of bloodhound, limit was removed as an option. I think is only an option on typeahead – Aphonia

seems like they keep changing it back and forth – Touchy

Answer 3

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

Ballade

The first null, did it for me. Thanks! – Simonette

Answer 4

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.

Pyoid

Answer 5

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

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

to

items: 'all'

Qualification

Answer 6

@Atul's answer definitely helped me, but I had another related issue with bloodhound. I was using a remote and I would not get results that I know that the remote would serve. It was because it found something close enough in the bloodhound cache and didn't ask the remote for the data. So by bumping the sufficient option on bloodhound from the default to 100, it is always asking the remote for more data.

Aphonia