Search code examples
typeahead.js

Typeahead/Bloodhound only returns first search results and not new search?


I've implemented Typeahead with Bloodhound to get remote JSON data and it works but when I delete what is in input and type something else the same results come up. I check the network in chrome dev tools and there is only one request, even if I delete and start typing again, no new request. How do I solve it? There should be a new request on keyup?

   var articles = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            remote: {
                url: '../fetch-article',
                wildcard: '%QUERY'
            }
        });


        $('#search-article .typeahead').typeahead(null, {
            name: 'articles',
            display: 'value',
            highlight: true,
            limit: Infinity,
            minLength: 3,
            source: articles,
            templates: {
                empty: [
                '<div class="empty-message">',
                    'Article not found',
                '</div>'
                ].join('\n'),
                suggestion: function(data) {
                    return '<div class="tt-suggest-page">' + data.title + '<br><a href="../copyright/' + data.slug + '">Read More</a></div>';
                }
            }
        });

Solution

  • Bloodhound caches the results from the first hit to the remote. It then tries to search only in the cached data for the second query you type in the text field and thus doesn't hit the remote again. You can tell bloodhound not to use cache for searching. This can be done using this configuration:

    var articles = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: '../fetch-article',
            wildcard: '%QUERY',
            cache: false        //set cache to false
        }
    });
    

    Ref: https://github.com/twitter/typeahead.js/issues/1525