typeahead.js 不返回所有结果

Posted 2023-05-07

【中文标题】typeahead.js 不返回所有结果

【英文标题】：typeahead.js not returning all results

【发布时间】：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/"
    
    ]

现在渲染如下：

【参考方案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 属性。这完全有效！

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