web-dev-qa-db-ja.com

未定義のjQuery UIのプロパティ「_renderItem」をHTMLでオートコンプリートに設定できません

次のコードを使用して、jQuery UIオートコンプリートアイテムをHTMLとしてレンダリングしています。アイテムはオートコンプリートコントロールで正しくレンダリングされますが、このjavascriptエラーが発生し続け、それを超えて移動できません。

Firefox JavaScript引数を変換できませんでした

Chrome 未定義のプロパティ「_renderItem」を設定できません

  donor.GetFriends(function (response) {
    // setup message to friends search autocomplete
    all_friends = [];
    if (response) {
        for (var i = 0; i < response.all.length - 1; i++) {                
                all_friends.Push({
                    "label":"<img style='padding-top: 5px; width: 46px; height: 46px;' src='/uploads/profile-pictures/" +
                        response.all[i].image + "'/><br/><strong style='margin-left: 55px; margin-top: -40px; float:left;'>" +
                        response.all[i].firstname + " " + response.all[i].lastname + "</strong>",

                    "value":response.all[i].firstname + " " + response.all[i].lastname,
                    "id":response.all[i].user_id});
            }
        }        

    $('#msg-to').autocomplete({
        source:all_friends,
        select:function (event, ui) {               
            // set the id of the user to send a message to
            mail_message_to_id = ui.item.id;
        }

    }).data("autocomplete")._renderItem = function (ul, item) {
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append($("<a></a>").html(item.label))
            .appendTo(ul);
    };
});

なぜこのエラーがスローされるのか、またはそれを乗り越えるために私がしなければならないことはわかりません...

javascriptjqueryjquery-uijquery-autocomplete
67
Carl Weis

私は参加したばかりで、上のdrcforbinの投稿にコメントできないので、自分の答えを追加する必要があると思います。

drcforbinは正しいですが、実際にはOPにあった問題とは別の問題です。このスレッドに来た人は誰でも、たった今リリースされたjQuery UIの新しいバージョンが原因でこの問題に直面しているでしょう。オートコンプリートに関連する特定の命名規則は、v1.9のjQuery UIで廃止され、v1.10で完全に削除されました（ http://jqueryui.com/upgrade-guide/1.10/#autocomplete を参照） 。

ただし、紛らわしいのは、item.autocompleteデータタグからui-への移行のみに言及していることです。 autocomplete-itemが、autocompleteデータタグもに名前が変更されましたui-autocomplete。そして、デモはまだ古い構文を使用しているため、さらに混乱します（したがって、壊れています）。

以下は、カスタムデータデモのjQuery UI 1.10.0の_renderItem関数で変更する必要があるものです。 http://jqueryui.com/autocomplete/#custom-data

元のコード：

.data( "autocomplete" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .data( "item.autocomplete", item )
    .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
    .appendTo( ul );
};

修正されたコード：

.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .data( "ui-autocomplete-item", item )
    .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
    .appendTo( ul );
};

autocompleteとitem.autocompleteの両方の変更に注意してください。これが自分のプロジェクトで機能することを確認しました。

192
nextgentech

私は同じ問題に遭遇しました...以降のバージョンでは、.data("ui-autocomplete")ではなく.data("autocomplete")である必要があります

26
drcforbin

私は答えに遅れていることを知っていますが、将来の人々がまだ得られない場合

 .data（ "ui-autocomplete-item"、item）

動作するには、このinstedを試してみてください

$(document).ready(function(){
 $('#search-id').autocomplete({
  source:"search.php",
  minLength:1,       
  create: function () {
   $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
      return $('<li>')
        .append( "<a>" + item.value + ' | ' + item.label + "</a>" )
        .appendTo(ul);
    };
  }
 })
});

それは私のために働いて、私はログイン機能で問題を抱えていました..それが言ったので、私はログインできませんでした

 Uncaught TypeError：未定義のプロパティ '_renderItem'を設定できません

これが誰かを助けることを願っています:)

/ kahin

9
Kahin

私はjquery 1.10.2を使用していますが、次を使用して動作します：

.data( "custom-catcomplete" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .data( "ui-autocomplete-item", item )
    .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
    .appendTo( ul );
};
6
AutoCiudad

そして今、jQuery-2.0.0では、それは新しいモジュールの名前ですが、「。」を置き換えます。 （ドット）「-」（ダッシュ）で：

jQuery.widget ('custom.catcomplete', jQuery.ui.autocomplete, {
    '_renderMenu': function (ul, items) {
        // some work here
    }
});

$this.catcomplete({
    // options
}).data('custom-catcomplete')._renderItem = function (ul, item) {}
5
Cyril N.

この投稿を偶然見つけた人のために投稿する。

このエラーは、.readcompleteイベントをdocument readyイベント内に配置しない場合にも現れます。

以下のコードは失敗します：

<script type="text/javascript">
    $('#msg-to').autocomplete({
        source:all_friends,
        select:function (event, ui) {               
            // set the id of the user to send a message to
            mail_message_to_id = ui.item.id;
        }

    }).data("autocomplete")._renderItem = function (ul, item) {
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append($("<a></a>").html(item.label))
            .appendTo(ul);
    };
</script>

以下のコードは動作します：

<script type="text/javascript">
    $(function(){
        $('#msg-to').autocomplete({
            source:all_friends,
            select:function (event, ui) {               
                // set the id of the user to send a message to
                mail_message_to_id = ui.item.id;
            }

        }).data("autocomplete")._renderItem = function (ul, item) {
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append($("<a></a>").html(item.label))
                .appendTo(ul);
        };
    });
</script>
3
Johnie Karr

使用しているjquery uiのバージョンに応じて、「autocomplete」または「ui-autocomplete」のいずれかになります。問題を修正するためにcomboboxプラグインにこの更新を行いました（〜ln 78-85）

var autoComplete = input.data("ui-autocomplete");
if(typeof(autoComplete) == "undefined")
     autoComplete = input.data("autocomplete");

autoComplete._renderItem = function(ul, item) {

...

1
Michael Angstadt