jQuery 自动完成无法正确显示

Question

我正在使用带有 JSON 的 jQuery Autocomplete，但结果数据显示不正确。如果您转到http://whatsmybeer.com 并输入“firestone”，您会得到一个下拉列表，其中显示“未定义”，结果数量正确，但 JSON 未正确显示。您可以看到从 javascript http://whatsmybeer.com/search.inc.php?beer=firestone&callback=? 调用的 JSON 输出示例。

我的 JS 脚本来显示 JSON 结果。

<script>
    $(document).ready(function() {
        $( "#REMOTE" ).autocomplete({
            source: function( request, response ) {
                url = "search.inc.php?beer=" + request.term;
                $.getJSON(url + '&callback=?', function(data) {
                    response(data);
                });
            }
        });
    });
</script>

我在解析中做错了什么？

Answer 1

首先，我会limit the search result to 10 或其他任何东西 - 当浏览器尝试处理数据以供显示时，第一次响应 thounds 或任何数量的啤酒都会杀死浏览器。

此外，我将autocomplete 的minLength 选项设置为2，因为放置一个字母对于服务器端来说太过分了，好像有人会输入'a'，它可能会返回数据库的一半（如果你赢了'不喜欢包括返回的数量限制）在输入第二个字母后添加自动完成更自然，尤其是对于大型数据库。

最重要的是 - 您需要以正确的方式格式化您的 JSON 响应。

你返回对象：

{ 
    beer_name: "name" 
}

你应该返回：

{
    label: "autocomplete display value",
    value: "input value after selection"
}

如果标签和值相同，只提供label 就足够了，您应该能够安全地省略在value 中复制它