Why typeahead.js is not showing all items in the ajax response?

Question

I am trying to use typeahead.js for showing ajax results in a form. At first I tried with Bloodhound suggestion engine which comes with typeahead by default. But it wasn't showing all the items (i just shows 1 or sometimes two) returned by the server.

Following is the code I used;

 $('.autocomplete').livequery(function () {
            var input = this;
            $(input).removeClass('autocomplete');

            var _source = new Bloodhound({
                limit: 25,
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('Value'),
                queryTokenizer: Bloodhound.tokenizers.obj.whitespace('Text'),
                prefetch: $(input).attr('data-source'),
                remote: {
                    url: $(input).attr('data-source') + '?query=%QUERY',
                    wildcard: '%QUERY'
                }
            });

            _source.initialize();

            $(input).typeahead({
                hint: true,
                highlight: true,
                minLength: 0
            }, {
                displayKey: 'Text',
                source: _source,
                templates: {
                    notFound: 'No results found'
                }
            });

            $(input).on('typeahead:selected', function (evt, item) {
                $(input).parent().parent().find('input[type="hidden"]').val(item.Value);
            });
        })

Then I tried to do it without Bloodhound using following code without any change in results;

 $('.autocomplete').livequery(function () {
            var input = this;
            $(input).removeClass('autocomplete');

            $(input).typeahead({
                hint: true,
                highlight: true,
                limit: 50,
                minLength: 0
            }, {
                displayKey: 'Text',
                source: function (query, syncResults, asyncResults) {
                    $.get($(input).attr('data-source') + '?query=' + query, function (data) {
                        asyncResults(data);
                    });
                },
                templates: {
                    notFound: 'No results found'
                }
            });

            $(input).on('typeahead:selected', function (evt, item) {
                $(input).parent().parent().find('input[type="hidden"]').val(item.Value);
            });
        })

The response from the Server for the requests is as follows;

[
{
    "Text": "Marketing Executive",
    "Value": 1
},
{
    "Text": "CEO",
    "Value": 5
},
{
    "Text": "Manager",
    "Value": 6
},
{
    "Text": "Accountant",
    "Value": 7
}]

What is wrong with this? and how can I get typeahead to display all results returned by the Server?

Answer 1

This is a bug in the control. This can be fixed by below code change in typeahead.bundle.js

Switch lines 1723 and 1724 so it looks like this

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

Kudos for the post Bootstrap Typeahead not showing hints as expected