Typeahead.js: typeahead not showing all results if less than limit

[islopma]

I'm using typeahead with the following code:

$('#questionId .typeahead').typeahead(null, {
    name: 'questions',
    displayKey: 'question',
    source: questionsList,
    limit: 10,
    templates: {
        empty: '<p>message</p>',
        suggestion: Handlebars.compile('<p>{{question}}</p>')
    }
})

Where 'questionsList' is a Bloodhound instance. The suggestions seem to be working fine when the query's number of matches is greater than 'limit' (10 in this case). But the problem is when the number of matches is <= limit. In that case, the number of suggestions displayed is max(limit - results, results). For instance, in my case when the query returns 10 matches, 0 results are displayed. When the query returns 8 matches, 2 results are displayed. When the query returns 3 matches, 3 results are displayed, and so on.

[rafaelGuerreiro]

+1. The problem seems to be on Dataset's update function... On the inner function called async.

function async(suggestions) {
    suggestions = suggestions || [];
    if (!canceled && rendered < that.limit) {
        that.cancel = $.noop;
        rendered += suggestions.length;
        that._append(query, suggestions.slice(0, that.limit - rendered)); // IMHO this slice shouldn't exist...
        that.async && that.trigger("asyncReceived", query);
    }
}

[coopy]

Both PRs close the issue. https://github.com/twitter/typeahead.js/pull/1212 comes with a test ;]

[javiercejudo]

This is solved in https://github.com/twitter/typeahead.js/pull/1200 but it isn't in master

[ShNURoK42]

Thx. I catched this.

[louy]

Can we expect this anytime soon?

[akashvarlani]

Thanks @rafaelGuerreiro. You just saved my day :+1:

[alexfarrill]

+1 for merging this

[dmitry027]

+1 for merging

[razvaniacob]

+1 for merging this

[luanau]

Interestingly, in my case no result is displayed when the number of suggestions exactly equals the limit I set. I use the three parameters async source function.

[droghio]

This is a very nasty bug, looks like a patch has been out for almost three months ( merge #1212 ), but still hasn't been pulled into main. Considering the popularity of the project I hope they patch the issue soon.

[unibasil]

+1 @luanau, the same thing happens. Zero results are shown when limit is equal to number of suggestions, 1 result when limit is greater by one and so on.

[unibasil]

+1 @droghio, it's strange there is no new release yet.

[louy]

For anybody who wants a quick solution, just use Infinity as the limit, and limit the results in your server response.

[normancesar]

@louy Thanks, that works perfectly and probably the right solution anyway, why return more results than you are going to display? Waste of network traffic

[louy]

it is, but you have to subtract results from sync callback as well, and then slice or something.

[suj87]

I have just spent hours trying to work out what the f*k was going on here and just come across this. I'm assuming this still isn't fixed in 0.11.1 (the ver I'm using)? I had my limit set to 7. I'm returning no more than 7 results from the server. When the result set is e.g. 5, it's only showing the first 2 etc.

[timkinnane]

I had the same problem and found the best option was to use a fork that already resolved this issue.
https://github.com/per-nilsson/typeahead.js/tree/fix-async-render-dist

[unibasil]

@louy, but if one has no access to server configuration or using third-party API?

@timkinnane, thanks, it's better than apply patch just in building process.

[suj87]

I decided to go for the lazy option and just set limit to 400 (though based on my wanted limit of 7 I guess 14 would work just as well).

[phlegx]

:+1: for merging

[oliroy]

+1 for merging

[pflannery]

+1

[ghost]

For any of you guys who are using Rails..I have included this fix on a fork from Yourabi's gem wrapper: https://github.com/mauricio-gonzalez/twitter-typeahead-rails

[deckyfx]

still happen with ver 0.11.1
if result same with limit, its not rendering

[samur-vonq]

still happen with ver 0.11.1

I am have the same problem.

$('#multiple-datasets .typeahead').typeahead({
hint: true,
highlight: true,
limit: 10
},
{
name: 'channelbyname',
display: 'name',
source: channelbyname,

  templates: {
    header: '<h4 class="set-title">Channels</h4>'
  }
},
{
  name: 'concept',
  display: 'name',
  source: concept,

  templates: {
    header: '<h4 class="set-title">Keyword</h4>'
  }
});

[rafaelGuerreiro]

There's a simple way of solving this: put the limit to 20 and divide it by 2 in your server side.

[natecox]

@louy the Infinity trick worked for me as well. Thanks!

[BenjaminRCooper]

Could limit using Nth-Child in CSS as a workaround too.

[markau]

@louy Thank you for the Infinity option

[namtab00]

This repo seems abandoned.. some kind souls continue maintaing it here: https://github.com/corejavascript/typeahead.js
I'd say the useful thing to do is sending pull request there.

[dlo]

Thanks @namtab00 for pointing out a maintained fork. As of July 2016, this bug has still not been fixed.

@louy's solution worked great for me.

[natecox]

I've been using https://github.com/corejavascript/typeahead.js for a while now instead of this repo, and it works great. highly suggest migrating over there.

[pam81]

I confirm too, this bug has still not been fixed.

[alestuber]

+1 for using Infinity and limiting on the backend.

But nevertheless this should be patched on master.

There's no one working on this repository anymore?

[natecox]

@alestuber This repo is as dead as dead gets as far as I can tell. https://github.com/corejavascript/typeahead.js is the place to go.

[jerefrer]

For Rails devs here, you can use this fork of the twitter-typeahead-rails gem.

[inandi]

For anybody who wants a quick solution, just use Infinity as the limit, and limit the results in your server response.

limit: Infinity
thanks for saving my day. peace!!!