如何解决Typeahead和bootstrap问题

Question

我已经包含了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 lib中显示错误

ps alert(country);有效

Answer 1

在你的＆＃34; datumTokenizer＆＃34;的定义中尝试改变＆＃34;价值＆＃34; to＆＃34; name＆＃34;例如：

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

＆＃34;值＆＃34;不存在于您的基准列表中，而＆＃34; name＆＃34; （请参阅您的过滤器功能），这可能会导致问题。

同样改变

displayKey: 'value',

为：

displayKey: 'name',

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