typeahead.js没有返回所有结果

我很难找到typeahead.js来返回/渲染我页面上的所有结果。 这是我的代码：

var places = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.whitespace, queryTokenizer: Bloodhound.tokenizers.whitespace, remote: { url: '/api/place/?country={{ country.id }}&name=%QUERY' , transform: function (data) { return data.response; } , wildcard: '%QUERY' } }); var selected = false; $('.typeahead-place').typeahead({ hint: true, highlight: true, minLength: 2 }, { name: 'places', displayKey: function (obj) { if (obj.url != null && obj.url.length && (obj.street == null || obj.street.length == 0)) { return obj.name + " (Online store)"; } return obj.name + " (" + obj.street + ", " + obj.city + ", " + obj.postcode + ")"; }, source: places }); 

Punn示例查询从服务器返回JSON：

 { "response": [ { "id": "4", "name": "Punnitse ja Säästä 2", "street": "Simonkenttä, Simonkatu 9", "city": "Helsinki", "postcode": "00100", "url": "http://www.punnitse.fi/" }, { "id": "12", "name": "Punnitse ja Säästä 3", "street": "Simonkenttä, Simonkatu 9", "city": "Helsinki", "postcode": "00100", "url": "http://www.punnitse.fi/" }, { "id": "13", "name": "Punnitse ja Säästä 4", "street": "Simonkenttä, Simonkatu 9", "city": "Helsinki", "postcode": "00100", "url": "http://www.punnitse.fi/" }, { "id": "9", "name": "Punnitse ja Säästä Kamppi", "street": "Simonkenttä, Simonkatu 9", "city": "Helsinki", "postcode": "00100", "url": "http://www.punnitse.fi/" } ] } 

现在这呈现如下：

Answer 1

这似乎是新版本的typeahead.js一个众所周知的错误 。 为了使您的代码正常工作，您宁愿切换到0.10.5或更低版本，并稍微转换您的代码：

 var places = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.whitespace, queryTokenizer: Bloodhound.tokenizers.whitespace, remote: { url: '/api/place/?country={{ country.id }}&name=%QUERY', wildcard: '%QUERY', filter: function(data) { // <-- should use `filter` return data.response; } } }); places.initialize(); // <-- initialise suggestion $('.typeahead-place').typeahead({ hint: true, highlight: true, minLength: 2 }, { name: 'places', source: places.ttAdapter(), // <-- get adapter as a source displayKey: function(obj) { // ... } }); 

演示： https ： //jsfiddle.net/uszcp6j3/

---

或者，如果您想坚持使用最新版本，可以将以前发布的修补程序应用于typeahead.js的源代码。

Answer 2

我刚刚在这里找到了答案： https ： //github.com/twitter/typeahead.js/issues/1232由louy提供：

 ... $('.typeahead-place').typeahead({ hint: true, highlight: true, minLength: 2, limit: Infinity }, ... 

…也就是说，您需要设置Javascript global Infinity属性的限制。 这完全有效！

也就是说，他们还没有修补代码是一种犯罪 – 这个错误已经被人们所知多年了。