Question

我已经做了一些搜索，但无法找到问题的答案。

问题：当第一个字母输入到输入框中时，我的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”建议就会消失。

任何人都知道这里发生了什么？

谢谢：）

Answer 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”时停止查看结果的原因。

输入第二个字母后，jQuery自动完成停止

1 个答案: