我的前端有一个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字段。我检查了DOM,TypeAhead生成了错误数量的结果集字段,因此CSS没问题(也试图删除所有自定义CSS)。
感谢您的答复:)
Twitter应该是abandoned项目。尝试the maintained fork。它已解决此问题。
尝试用engine
初始化engine.initialize()
;在suggestion
返回filter
对象,该对象应该在templates
-> suggestion
中可用;用engine
初始化source
处的source:engine.ttAdapter()
;在String
处将元素返回为suggestion
,以填充“建议”下拉菜单。参见Typeahead - examples - Custom Templates
var data = [{
"firstName": "Test",
"lastName": "User",
"id": 1
}, {
"firstName": "Test2",
"lastName": "User2",
"id": 2
}, {
"firstName": "Test3",
"lastName": "User3",
"id": 3
}, {
"firstName": "Test4",
"lastName": "User4",
"id": 4
}, {
"firstName": "Test5",
"lastName": "User5",
"id": 5
}];
var engine = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: $.map(data, function(val, key) {
// return `suggestion` object for `templates` `suggestion`
return {value:val.firstName, suggestion:val}
})
});
// initialize `engine`
engine.initialize();
// instantiate the typeahead UI
$("#typeahead .typeahead")
.typeahead({
hint: true,
highlight: true,
minLength: 1,
}, {
name: "engine",
displayKey: "firstName",
templates: {
suggestion: function (data) {
// `suggestion` object passed at `engine`
console.log(data.suggestion);
// return suggestion element to display
var _suggestion = "<div>"
+ data.suggestion.firstName
+ " "
+ data.suggestion.lastName + "</div>";
return _suggestion
}
},
source: engine.ttAdapter()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
<div id="typeahead" class="col-md-8">
<input class="typeahead form-control" type="text" placeholder="Select the user">
</div>
[如果(喜欢我),您不想进入预先输入的来源,(例如,因为您要使用最小版本),您还可以将限制设置得很高。然后,您必须自己限制要放入列表中的项目数。
$('#typeahead .typeahead')
.typeahead({
hint: true,
highlight: true,
minLength: 1,
},
{
name: 'engine',
displayKey: 'fullName',
source: engine,
limit: 1000
})
对于任何发现此问题的人,请使用代码的维护版本。原来是废话。