jQuery 自动完成在输入第二个字母后停止答案

【问题标题】：jQuery autocomplete stops after 2nd letter enteredjQuery 自动完成在输入第二个字母后停止
【发布时间】：2012-08-08 18:01:17
【问题描述】：

我进行了一些搜索，但找不到我的问题的答案。

问题：当第一个字母输入到输入框中时，我的 jQuery 自动完成实现工作，但是当输入第二个字母时，建议消失（就像我输入了一个不正确的字母）。

我的 jQuery 代码：

<script type="text/javascript">
        $(document).ready(function() {
           $('#invite-connections').autocomplete({
               minLength: 0,
               source: <?php echo json_encode($array); ?>,
               focus: function(event, ui) {
                   $('#invite-connections').val(ui.item.name);
                   return false;
               },
               select: function(event, ui) {
                   $('#invite-connections').val(ui.item.name);
                   $('#invite-connections-user-id').val(ui.item.id);
                   $('#invite-connections-submit').show();
                   return false;
               }
           }) 
           .data("autocomplete")._renderItem = function(ul, item) {
               return $("<li type=\"none\"></li>")
                    .data("item.autocomplete", item)
                    .append("<a><img src=\"" + item.pic + "\" /> " + item.name + "</a>")
                    .appendTo(ul);
           }
        });
        </script>

这是传递给源的数据（JSON 编码）：

[{"name":"test 2","pic":"\/events\/images\/default\/dp\/micro_placeholder.jpg","id":"60705234"}]

所以，当我输入“t”时它可以工作，但是当我输入“e”时，“te”现在在输入框中，“test 2”建议消失了。

有人知道这里发生了什么吗？

谢谢:)

【问题讨论】：

@RicardoLohmann 没有显示错误，只是停止提供建议。也尝试填写其余的字母，但没有弹出任何内容

标签： jquery json jquery-ui jquery-autocomplete jquery-ui-autocomplete

【解决方案1】：

用于自动完成的源数组必须包含具有 label 属性、value 属性或两者兼有的对象（如overview page 中所述在文档中）。您可以通过添加以下属性之一将源数组转换为小部件支持的数组：

var src = <?php echo json_encode($array); ?>;

$.each(src, function () {
    this.value = this.name;
});

$(document).ready(function() {
    $('#invite-connections').autocomplete({
        minLength: 0,
        source: src,
        focus: function(event, ui) {
            $('#invite-connections').val(ui.item.name);
            return false;
        },
        select : function(event, ui) {
            $('#invite-connections').val(ui.item.name);
            $('#invite-connections-user-id').val(ui.item.id);
            $('#invite-connections-submit').show();
            return false;
        }
    })
    .data("autocomplete")._renderItem = function(ul, item) {
        return $("<li type=\"none\"></li>")
            .data("item.autocomplete", item)
            .append("<a><img src=\"" + item.pic + "\" /> " + item.name + "</a>")
            .appendTo(ul);
    }
});

示例： http://jsfiddle.net/ASwRj/

"t" 和 "e" 工作的原因是因为数组的字符串表示中的每个对象看起来像：

[object Object]

在没有任何匹配属性的情况下，自动完成小部件会尝试将您键入的内容与对象的字符串表示形式相匹配，这就是您在键入“s”的那一刻就停止看到结果的原因。

【讨论】：