TypeAhead.js and Bloodhound showing an odd number of results

Question

I have a TypeAhead/Bloodhound implementation in my frontend, that fetches JSON-data from a Play/Scala-server. Typeahead-version is 0.11.1. The implementation is as follows:

HTML:

<div id="typeahead" class="col-md-8">
   <input class="typeahead form-control"  type="text" placeholder="Select the user">
</div>

JavaScript:

var engine = new Bloodhound({
  datumTokenizer: function (datum) {
    var fullName = fullName(datum);
    return Bloodhound.tokenizers.whitespace(fullName);
  },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  identify: function(obj) { return obj.id; },
  remote: {
    url: routes.controllers.Users.index("").url,
    cache: false,
    replace: function (url, query) {
        if (!isEmpty(query)) {
            url += encodeURIComponent(query);
        }
        return url;
    },
    filter: function (data) {
        console.log(data);
        return $.map(data, function (user) {
            return {
                id: user.id,
                fullName: viewModel.fullName(user)
            };
        });
    }
}
});

// instantiate the typeahead UI
$('#typeahead .typeahead')
.typeahead({
    hint: true,
    highlight: true,
    minLength: 1,
},
{
    name: 'engine',
    displayKey: 'fullName',
    source: engine
})

function fullName(data) {
  if (data === undefined) return "";
  else {
    var fName = data.firstName === undefined ? "" : data.firstName;
    var lName = data.lastName === undefined ? "" : data.lastName;
    return fName + ' ' + lName;
  }
};

JSON-response the server gives:

[{"firstName":"Test","lastName":"User", "id":1}, ... ]

The server pages the result so that it gives maximum of 5 results, which is supposed to be the default limit for Typeahead/Bloodhound as well.

The problem is that when the server returns 5 results, Typeahead shows 0 results in the overlay. If the server gives 4 results, TypeAhead shows 1 in the overlay. If the server gives 3 results, TypeAhead shows 2 results. For 2 and 1 results it shows the correct number of elements in the overlay. If I remove the page length and the server returns over 10 results, then TypeAhead shows 5 results (the limit). console.log inside the filter shows the correct number of data-results, so they go to Bloodhound at least.

What might be the issue with this code? This TypeAhead-field is the only TypeAhead-field present in this page. I checked the DOM, and TypeAhead generates wrong amount of result-set fields, so it's not a problem with CSS (tried to remove all custom CSS as well).

Thanks for any replies :)

Answer 1

For anyone who finds this, use the maintained version of the code. The original is crap.

https://github.com/corejavascript/typeahead.js