如何对 Typeahead 和引导程序进行故障排除答案

【问题标题】：How to troubleshoot Typeahead and bootstrap如何对 Typeahead 和引导程序进行故障排除
【发布时间】：2014-06-20 10:40:16
【问题描述】：

我已经包含了 jQuery 2.1 bootstrap 3.x 和最新的 typeahead。这是我的代码：

<script type="text/javascript">
    $(document).ready(function () {
        var bestPictures = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            prefetch: {
                    url: 'TypeAheadPrefetch.ashx',
                    filter: function (list) {
                        return $.map(list, function (country) { alert(country); return { name: country }; });
                    }
                },
            remote: 'AutoComplete.asmx/GetSuperSearchTypeAhead?q=%QUERY'
        });
        bestPictures.initialize();

        $("#tbSSearch").typeahead(null, {
            name: 'best-pictures',
            displayKey: 'value',
            source: bestPictures.ttAdapter()
        });
    });
</script>
<input type="text" id="tbSSearch" placeholder="ST Super Search" class="form-control" />

prefetch.ashx 返回["a","b","c" 等。预取的字符串数组非常大，它应该包含正确的结果。所以不需要调用遥控器。但它确实！这是为什么？为什么没有可见的下拉菜单？

我的浏览器控制台在return s.split(/\s+/); 上第 134 列第 12 行的 typeahead 库中显示错误

ps alert(country); 有效

【问题讨论】：

你能举一个 GetSuperSearchTypeAhead 返回的例子吗？
一个字符串数组转json（类似于prefetch.ashx）

标签： jquery typeahead.js bootstrap-typeahead

【解决方案1】：

在您对“datumTokenizer”的定义中，尝试将“值”更改为“名称”，例如：

datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),

“值”在您的数据列表中不存在，而“名称”存在（请参阅您的过滤器功能），因此这可能会导致问题。

类似的变化

displayKey: 'value',

到：

displayKey: 'name',

我没有测试过这个答案，因为重新创建使用远程/预取数据调用的问题总是很尴尬！

【讨论】：

很高兴我能帮助@JPHellemons