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

回答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/

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

回答3:

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.

回答4:

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

回答5:

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

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

items: 'all'

回答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.

来源：https://stackoverflow.com/questions/23981704/typeahead-always-shows-only-5-suggestions-maximum

标签

javascript

jquery

limit

typeahead.js

twitter-typeahead