11

My Typeahead.js / Bloodhound (0.11.1) doesn't work as expected. Out of the long list of json results provided, only some are displayed as suggestions.

For example, if I type los in my field, I get only Lostorf and nothing else, when there should be 4 selectable items displayed.

This is my code:

HTML

<div id="remote">
<input class="typeahead" type="text">
</div>

JS

var searchablePlaces    = new Bloodhound({
    datumTokenizer      : Bloodhound.tokenizers.obj.whitespace("term"),
    queryTokenizer      : Bloodhound.tokenizers.whitespace,
    remote              : {
        url             : 'http://www.example.com/autocomplete/%QUERY/',
        wildcard        : '%QUERY',
        filter          : function(response) { return response.data.results; }
      },
    limit               : 10
});

searchablePlaces.initialize();

$('#remote .typeahead').typeahead(
{
    hint            : true,
    highlight       : true,
    minLength       : 2
},
{
    name            : 'searchable-places',
    displayKey      : "term",
    source          : searchablePlaces.ttAdapter()
})

Json

{
    "data": {
        "query": "los",
        "count": 4,
        "results": {
            "1": {
                "term": "Losanna"
            },
            "2": {
                "term": "Losone"
            },
            "3": {
                "term": "Lostallo"
            },
            "4": {
                "term": "Lostorf"
            }
        }
    }
}

Do you see something wrong? Thanks!

Dr. Gianluigi Zane Zanettini
  • 2,010
  • 3
  • 32
  • 61

1 Answers1

18

This is to confirm that the issue is caused by this typehaead bug: https://github.com/twitter/typeahead.js/issues/1218

As suggested by joekur in the issue report, I solved replacing this:

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

With this:

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

I marked my own question as duplicate of this: TypeAhead.js and Bloodhound showing an odd number of results It's the same problem, I just cannot find it before due to different wording

HTH.

Community
  • 1
  • 1
Dr. Gianluigi Zane Zanettini
  • 2,010
  • 3
  • 32
  • 61
  • 7
    I actually didn't have to replace the code, only add `limit:10` to typeahead and my results started showing. – kross Oct 16 '15 at 17:12
  • Thank you! It did solve the issue. That was driving me crazy for like 2 hours! –  Feb 14 '16 at 16:07
  • Its still the issue so you code really helped. was about to go mad :) – Jay Jun 13 '16 at 16:51
  • Thanks Dr you answer also solve my problem. – Muhabutti Nov 18 '16 at 15:41
  • I tried the @rosskevin on Github issue and it works well. "I actually didn't have to replace the code, only add limit:10 to typeahead and my results started showing." – trungk18 Mar 07 '17 at 03:17
  • I had the issue once I added the limit: 10. I wanted to keep limit: 10 (rather than the default 5), so I did the line swap so that rendered is incremented once the items have been added. I haven't seen any negative side effects. – ScottFoster1000 Nov 28 '18 at 18:52
  • Twitter have abandoned the project, [corejs-typeahead](https://github.com/corejavascript/typeahead.js) is a maintained fork that fixes this bug. – Thomas W Jul 26 '22 at 10:38