У меня есть реализация TypeAhead/Bloodhound в моем интерфейсе, который извлекает JSON-данные из Play/ Scala -сервера. Typeahead-версия - 0.11.1. Реализация выглядит следующим образом:
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 сервер дает:
[{"firstName":"Test","lastName":"User", "id":1}, ... ]
Сервер выводит результат так, чтобы он выдавал максимум 5 результатов, который также должен быть предел по умолчанию для Typeahead/Bloodhound.
Проблема заключается в том, что когда сервер возвращает 5 результатов, Typeahead показывает 0 результатов наложения. Если сервер дает 4 результата, TypeAhead показывает 1 в оверлее. Если сервер дает 3 результата, TypeAhead показывает 2 результата. Для 2 и 1 результатов оно показывает правильное количество элементов в наложении. Если я удалю длину страницы и сервер вернет более 10 результатов, то TypeAhead отобразит 5 результатов (лимит). console.log внутри фильтра показывает правильное количество результатов данных, поэтому они идут по крайней мере в Bloodhound.
В чем может быть проблема с этим кодом? Это поле TypeAhead является единственным полем TypeAhead, присутствующим на этой странице. Я проверил DOM, и TypeAhead генерирует неправильное количество полей результатов, поэтому это не проблема с CSS (также пытался удалить все пользовательские CSS).
Спасибо за любые ответы:)