twitter / typeahead.js

typeahead.js is a fast and fully-featured autocomplete library
http://twitter.github.io/typeahead.js/
MIT License
16.52k stars 3.21k forks source link

typeahead.js 0.11.1 doesn't render results when results are less than limit #1795

Open wpconsulate opened 3 years ago

wpconsulate commented 3 years ago

I'm using typeahead 0.11.1 on a website and making a remote call to the public API for search. I noticed that typeahead works fine when there are more than limit records ( default limit is 5 as you guys have set it ) but when API returns less than 5 results. typeahead just shows 1 single result there.

I noticed there was a similar kind of issue earlier link here https://stackoverflow.com/questions/31007825/bootstrap-typeahead-not-showing-hints-as-expected

and after checking the typeahead.bundle.js I found the suggested solution is implemented. But this solution isn't working in the latest release.

I noticed the issue is being the number of results returned by the API.

So on LINE 1723

I changed the following code rendered += suggestions.length; To if(suggestions.length > that.limit) rendered += suggestions.length;

and this fixed the issue for me. I haven't tested it much yet will report if found anything.

thanks

pursca commented 2 years ago

the logic inside this function is wrong 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)); that.async && that.trigger("asyncReceived", query); } } it should be - rendered += suggestions.length; should be put after that._append() function async(suggestions) { suggestions = suggestions || []; if (!canceled && rendered < that.limit) { that.cancel = $.noop; that._append(query, suggestions.slice(0, that.limit - rendered)); rendered += suggestions.length; that.async && that.trigger("asyncReceived", query); } }

john-999 commented 2 years ago

Recommended new solutions (without jQuery dependencies):

  1. Tarek Raafat's "autoComplete.js" (can be used in existing forms): https://github.com/TarekRaafat/autoComplete.js

  2. "Algolia autocomplete" (but creates a form element, so not usable within existing forms, only as a standalone element): https://github.com/algolia/autocomplete

jlbooker commented 1 year ago

Duplicate of #1232

You can also find a fix for this included in the fork at: https://github.com/corejavascript/typeahead.js