CODEWITHSUNDEEP
javascripttokenizetypeahead.jstwitter-typeaheadbloodhound
DatsunBing
DatsunBing

Reputation: 9076

Bloodhound: Twitter Typeahead is not showing all results fetched from remote/ajax

I am using Twitter Typeahead in a really simple setup. It makes a remote call to a server to get a list of names and identifiers as a json array, such as the following:

[{"value":"Declan Strosin","data":"b2c9d118-2e7a-4516-bc50-5505cbfcc834"},{"value":"Jany Legros","data":"d8b53d8c-d952-4fed-bc22-5932094abca1"}]

The problem is that sometimes the the Typeahead will render all the matching options, but other times it will show only a few. There doesn't seem to be any rhyme or reason to what it decides to render.

For example, I might type "and", and receive from the server a list of 10 users with names like "Sandy Blogs", "Andrew Blogs", "John Sanderson", etc, and it will list all 10 users. The correct 3 letters are highlighted too.

For other searches however, "ros", "dan", etc, it might pull back 10 users but only render two or three.

I suspect the problem is with my Bloodhound datum tokenizer, but don't really know what to do about it. Here's my Bloodhound setup.

    return new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: url + '?term=%QUERY',
            wildcard: '%QUERY'
        }
    });

I have read this article, https://github.com/twitter/typeahead.js/blob/master/doc/migration/0.10.0.md#tokenization-methods-must-be-provided, but am still none the wiser.

Edit: I have now experienced cases where 10 or more entries are pulled back from the server, but nothing is rendered by the Typeahead.

Upvotes: 4

Views: 1968

Answers (2)

Niket Pathak
Niket Pathak

Reputation: 6800

There doesn't seem to be a problem with your code. You can try the following:

  • Use a more recent/maintained version: The original Typeahead has NOT received any updates since 3+ years now(checkout github). But there's an actively maintained fork. (as of 2018)

  • use Identify(): It seems that you have not set the identify() option while setting up Bloodhound. According to the official documentation, it is recommended to use it so that your datums are always unique.

  • Lastly, cross-check: with the Tutorial in the reference to ensure that you haven't missed out anything.

Reference: Typeahead Tutorial @Digital Fortress

Upvotes: 4

Munim Munna
Munim Munna

Reputation: 17546

Your code is exactly fine, there is no problem with with. Bloodhound has an issue with the limit setting of the bloodhound suggestions. You can see issue details here.

At present I cannot say what is causing the issue, as trying different combinations of result list, it does not make any sense to me.

But for now the quick solution is to set the limit to 20, and it works just fine. Hope the developers solve this issue soon. Till then this is your best bet.

return new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 20,
    remote: {
        url: url + '?term=%QUERY',
        wildcard: '%QUERY'
    }
});

Upvotes: 2

Related Questions