1

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

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

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

谢谢 ：）

4

1 回答 1

0

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

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”的那一刻就停止看到结果的原因。

于 2012-08-08T19:18:54.567 回答