1

私はいくつかの検索を行いましたが、私の問題に対する答えが見つかりません。

問題: 入力ボックスに最初の文字を入力すると、jQuery オートコンプリートの実装が機能しますが、2 番目の文字を入力すると、提案が消えます (間違った文字を入力したように)。

私の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 に答える