我在前端实现了TypeAhead/Bloodhound,从Play/Scala服务器获取JSON数据。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响应:
[{"firstName":"Test","lastName":"User", "id":1}, ... ]
服务器对结果进行分页,以便最多提供5个结果,这应该也是Typeahead/Bloodhound的默认限制。
问题在于当服务器返回5个结果时,TypeAhead覆盖上不显示任何结果。如果服务器提供4个结果,则TypeAhead覆盖上显示1个结果。如果服务器提供3个结果,则TypeAhead覆盖上显示2个结果。对于2和1个结果,它会正确地显示覆盖层中的元素数量。如果我删除页面长度并且服务器返回超过10个结果,则TypeAhead会显示5个结果(限制)。筛选器中的console.log显示了正确数量的数据结果,因此它们至少已传递给Bloodhound。
此代码有什么问题?此TypeAhead字段是此页面中唯一的TypeAhead字段。我检查了DOM,并且TypeAhead生成了错误数量的结果集字段,因此这不是CSS的问题(也尝试删除所有自定义CSS)。
感谢任何回复:)