typeahead.js bloodhound minLength not working

Question

I have implemented typeahead.js and bloodhound with a remote data source and it mostly works as expected. However, I have set the minLength on the typeahead to 2 and while I can see an ajax request fire after 2 characters (and 3), the typeahead only offers suggestions after 4 characters or more. Is there something missing from my config (i'm using typeahead.bundle.min.js).

var local_authorities = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    identify : function(datum) {
        //console.log(datum);
        return datum.value;
    },
    remote:  {
        url: "/addresses/autocomplete_local_authorities/%QUERY",
        wildcard: '%QUERY',
        filter: function (data) {
            // Map the remote source JSON array to a JavaScript object array
            return $.map(data.local_authorities, function (local_authority) {
                return {
                    id: local_authority.id,
                    value: local_authority.name
                };
            });
        }
    }
});

$('.typeahead.local-authority').typeahead({
    hint: true,
    highlight: true,
    minLength: 2,        
}, {
    limit: 8,
    source: local_authorities,
    displayKey: 'value',
})
.on('typeahead:selected', function (e, item) {
    $('[name="local_authority_ids"').val(item.id);
});

Thanks.

Answer 1

Some debugging showed that this is caused by the function async(suggestions) (lines 1719-1727):

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);
     }
}

The bug is caused by setting rendered to suggestions.length before calling append, hence when Bloodhound is recieving 5 or more results for the query, suggestions.slice(0, that.limit - rendered) is always empty, as the standard limit is 5.

Suggestions are only added if the remote endpoint returns less then limit objects, which happens in your case for 4 letters and more.

As I'm not a developer of Typeahead nor Bloodhound, I dont want (and have the time) to figure why it has been implemented like this and how this can be fixed, however, a quick workaround is to increase limit .

It has to be set in the second config object, e.g. $( "#someId" ).typeahead( { ... }, {..., limit: 10, ...});

EDIT: using typeahead/bloodhound v. 0.11.1