Ich habe eine TypeAhead / Bloodhound-Implementierung in meinem Frontend, die JSON-Daten von einem Play / Scala-Server abruft. Typeahead-Version ist 0.11.1. Die Implementierung sieht wie folgt aus:

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-Antwort des Servers:

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

Der Server paginiert das Ergebnis so, dass maximal 5 Ergebnisse angezeigt werden. Dies sollte auch das Standardlimit für Typeahead / Bloodhound sein.

Das Problem ist, dass Typeahead 0 Ergebnisse in der Überlagerung anzeigt, wenn der Server 5 Ergebnisse zurückgibt. Wenn der Server 4 Ergebnisse liefert, zeigt TypeAhead 1 in der Überlagerung an. Wenn der Server 3 Ergebnisse liefert, zeigt TypeAhead 2 Ergebnisse an. Bei 2 und 1 Ergebnissen wird die richtige Anzahl von Elementen in der Überlagerung angezeigt. Wenn ich die Seitenlänge entferne und der Server mehr als 10 Ergebnisse zurückgibt, zeigt TypeAhead 5 Ergebnisse an (das Limit). console.log im Filter zeigt die korrekte Anzahl der Datenergebnisse an, sodass sie mindestens an Bloodhound gesendet werden.

Was könnte das Problem mit diesem Code sein? Dieses TypeAhead-Feld ist das einzige TypeAhead-Feld auf dieser Seite. Ich habe das DOM überprüft und TypeAhead generiert eine falsche Anzahl von Ergebnismengenfeldern. Daher ist dies kein Problem mit CSS (es wurde versucht, auch alle benutzerdefinierten CSS zu entfernen).

Vielen Dank für alle Antworten:)