TypeAhead.js和Bloodhound显示奇数个结果

我的前端有一个TypeAhead / Bloodhound实现，它从Play / Scala服务器获取JSON数据。 Typeahead-version是0.11.1。 实施如下：

HTML：

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个结果（限制）。 filter内的console.log显示正确的数据结果数，因此它们至少会转到Bloodhound。

这段代码可能有什么问题？ 此TypeAhead-field是此页面中唯一存在的TypeAhead-field。 我检查了DOM，并且TypeAhead生成了错误数量的结果集字段，所以它不是CSS的问题（试图删除所有自定义CSS）。

谢谢你的回复:)

Answer 1

代码中的typeahead存在问题：

https://github.com/twitter/typeahead.js/issues/1218

您可以按照问题页面上的说明在JS中自行更改代码。

Answer 2

Twitter据说放弃了这个项目。 尝试维护的fork 。 它解决了这个问题。

Answer 3

尝试使用engine.initialize()初始化engine ; 在filter处返回suggestion对象，该对象应该在templates – > suggestion可用; 使用source:engine.ttAdapter() ;在source source:engine.ttAdapter()初始化engine 在suggestion将元素返回为String ，以填充“建议”下拉菜单。 请参见Typeahead – 示例 – 自定义模板

 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 = "
" + data.suggestion.firstName + " " + data.suggestion.lastName + "
"; return _suggestion } }, source: engine.ttAdapter() }); 

Answer 4

如果（对我而言）你不想进入预先输入源（例如因为你想使用最小版本），你也可以设置极限非常高。 然后，您必须自己限制要放入列表的项目数。

 $('#typeahead .typeahead') .typeahead({ hint: true, highlight: true, minLength: 1, }, { name: 'engine', displayKey: 'fullName', source: engine, limit: 1000 })