Typeahead.js: Bug? No results when using a remote source that gives an output equal to the limit

[GiovanniMounir]

In typeahead.js, if your remote async JSON returns an X amount of results where X is the same as your limit, no suggestions appear under typeahead.js.

Here is the code where this is reproduced:

jQuery('#some_id').typeahead({ 
    source: function (query, processSync, processAsync) {
    return $.ajax({
      url: '/json.json', 
      type: 'GET',
      data: {query: query},
      dataType: 'json',
      success: function (json) {
        return processAsync(json);
      }
    });
  }});

Results from json.json:
['1','2','3','4','5']

Expectations: 1,2,3,4,5 would show in the type ahead suggestions box.
What actually happens: The suggestions box is empty.

Workaround:

On typeahead.js:811:

Change

that._append(query, suggestions.slice(0, that.limit - rendered));

To

that._append(query, (rendered > that.limit)? suggestions.slice(0, that.limit - rendered) : suggestions);

The problem appears to happen when that.limit = rendered, because array.slice(0,0) would give an empty array.

I'm not quite sure if that workaround is recommended as I have not reviewed the whole code. Is anyone else able to reproduce this?

Thank you!

[GiovanniMounir]

Looks like there is a pull request already regarding this at https://github.com/twitter/typeahead.js/pull/1672/files

[kerkouch]

I have the same issue, I replaced that.limit - rendered with that.limit, and it works.

The intended result was to cut the suggestions from the end when they're longer than the limit, so if limit is set to 5 and the returned suggestions length is 7, that.limit - rendered will equal -2, which means slice will cut 2 suggestions from the end, and the remainings suggestions length will be 5.

Another problem will happen if rendered for example is equal to 3, that.limit - rendered will be 2! So only two suggestions that will be shown, but in reality, there's 3.

So the solution is to replace that.limit - rendered with that.limit.

arr.slice([begin[, end]])
If end is greater than the length of the sequence, slice extracts through to the end of the sequence (arr.length). --- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

[GiovanniMounir]

Thanks for sharing this! It looks like the rendered += suggestions.length; is just in the wrong place: the pull request solves this by moving the code after the slice.

By the way, this appears to be the currently maintained repository and it implements some pull requests from the twitter/typeahead.js repository, including the pull request to fix this issue, I believe: https://github.com/corejavascript/typeahead.js

[Xeoncross]

Wow, just spent a while scratching my head over this. Really unexpected bug.

[joshuapinter]

I can't believe this bug still exists in 2020.

Please, _everybody_ just update your JS libraries to use https://github.com/corejavascript/typeahead.js and don't look back.