typeahead.js 不返回所有结果答案

【问题标题】：typeahead.js not returning all resultstypeahead.js 不返回所有结果
【发布时间】：2015-10-23 04:12:01
【问题描述】：

我无法让 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/"
    }
    ]
}

现在渲染如下：

【问题讨论】：

标签： jquery jquery-plugins typeahead.js

【解决方案1】：

这似乎是typeahead.js 新版本的well-known bug。为了使您的代码正常工作，您宁愿切换到 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/

或者，如果你想坚持最新版本，你可以将前一段时间发布的the following patch应用到typeahead.js的源代码中。

【讨论】：

补丁中有错误 ^^ 应该在 typeahead.bundle.js 中再删除一行：suggestions =Suggestions.slice(0, that.limit - render);
@StavBodik 没有你提到的错误
哇，现在是 2020 年，这仍然是个问题。我刚刚使用了上面链接的补丁@VisioN，效果很好。

【解决方案2】：

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

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

...也就是说，您需要将限制设置为 Javascript 全局 Infinity 属性。这完全有效！

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

【讨论】：