我的前端有一个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在叠加中显示0个结果.如果服务器提供4个结果,则TypeAhead会在叠加层中显示1.如果服务器提供3个结果,TypeAhead显示2个结果.对于2和1结果,它显示了覆盖图中正确的元素数量.如果我删除页面长度,并且服务器返回超过10个结果,则TypeAhead显示5个结果(限制).过滤器中的console.log显示正确的数据结果数量,所以他们至少要去Bloodhound.
这段代码可能是什么问题？此TypeAhead字段是此页面中唯一的TypeAhead-field.我检查了DOM,而TypeAhead会产生错误的结果集字段,所以这不是CSS的问题(也尝试删除所有自定义CSS).
感谢任何回复:)
