Question

我一直在尝试将typeahead.js功能添加到我网站上的搜索功能中。但即使我花了很多时间玩它，它也无法正常工作。网站：digrin.com 最近我甚至看不到我在打字的东西。如果我取消注释这个javascript代码，我可以在输入时看到文字：

    <script type="text/javascript">//<![CDATA[-->
        $(document).ready(function() {
            $('.typeahead').typeahead({
                name: 'search',
                displayKey: 'name',
                remote: 'search/autocomplete/?q=%QUERY',
                minLength: 1, // send AJAX request only after user type in at least X characters
                limit: 5 // limit to show only 5 results
            });
    });//]]>
    </script>

自动完成远程json响应： http://www.digrin.com/search/autocomplete/?q=bb 谢谢你提前回答！

#################### EDIT1

所以多亏了zeropaper的评论，我包括了这样的猎犬：

<script type="text/javascript">//<![CDATA[-->
    $(document).ready(function() {
        var search = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            remote: '/search/autocomplete/?q=%QUERY'
        });

        search.initialize();
        $('.typeahead').typeahead(null, {
            name: 'search',
            displayKey: 'name',
            minLength: 1, // send AJAX request only after user type in at least X characters
            limit: 5, // limit to show only 5 results
            source: search.ttAdapter()
        });
});//]]>
</script>

现在我可以在打字时看到文字，但建议框仍未显示。

Answer 1

上面的代码缺少Bloodhound实现，请看一下远程示例： http://twitter.github.io/typeahead.js/examples/#remote

顺便说一下，你的CSS样式也可能有冲突（初看起来对我来说很奇怪）。

Answer 2

如下所示更改您的猎犬实施。

    var search  = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 1000,
    remote: {
        cacheKey: 'search',
        url: "http://www.digrin.com/search/autocomplete/",
        replace: function(url, query) {
               return url + "?q=" + query;
        },
        filter: function(search) {
            return $.map(search, function(data) {
                    return {
                        tokens: data.tokens,
                        symbol: data.symbol,
                        name: data.name
                }
            });
        }
    }
});

twitters typeahead.js没有显示建议

2 个答案: