带有远程 json 的 Twitter Typeahead 不起作用答案

【问题标题】：Twitter Typeahead with remote json not work带有远程 json 的 Twitter Typeahead 不起作用
【发布时间】：2016-04-03 05:31:06
【问题描述】：

我的 twiter typeahead 初始化是：

 var cityList = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            remote: {
                url: $('#citySearchInput').attr('data-src')+'?query=%QUERY',
                wildcard: '%QUERY',
                dataType: "json",                    
                ajax : {                       
                    type: "GET"
                }
            }
        });
     $('#citySearchInput').typeahead({
                minLength: 2,
                highlight: true,
                hint: true
            }, {
            display: 'value',
            source: cityList,
            limit:25,
            valueKey: 'query',
            templates: {
                empty: function(data){
                    console.log(data);
                    return 'empty';
                },
                suggestion:  function(data) {
                    console.log(data);
                    return '<p><a href="'+data.link +'">' + data.value + '</a></p>';
                }
            }
        });

它与来自后端的答案一起工作：

[{"link":"\/en\/forecast\/Iran\/Ostan-e-Lorestan\/Defkandar","value":"Defk\u0101ndar, Ost\u0101n-e Lorest\u0101n(Iran)"},{"link":"\/en\/forecast\/Iran\/Ostan-e-Lorestan\/Defkundar","value":"Defk\u016bndar, Ost\u0101n-e Lorest\u0101n(Iran)"}]

但是当返回更多数据时，例如 8 个项目 - 总是写“空”和建议数据 0。我在 js 中设置了从 25 到 100 的限制后修复了它，但我认为这不是正确的方法。

【问题讨论】：

标签： jquery json ajax twitter typeahead

【解决方案1】：

对于我的用例，后端限制为返回 25 个项目。我将 typeahead 设置为 limit:25，因为这看起来很明智。我注意到当我在 JSON 中返回的结果少于 25 个时，我会显示结果，但是当 JSON 包含所有 25 个项目时，什么都没有发生。

阅读您的问题后，我添加了一个空模板，每次我有 25 个结果时都会触发它。可能是代码中的一个错误？我没有调查过。

我将 Typeahead 的限制提高到 50，因为我知道后端确保我永远不会看到超过 25 个。现在一切正常。

这主要是我的帖子，它试图强调您的解决方法在后端确保限制的情况下是有效的。

【讨论】：