Die Eigenschaft '_renderItem' der undefinierten automatischen Vervollständigung der jQuery-Benutzeroberfläche mit HTML kann nicht festgelegt werden

Ich verwende den folgenden Code, um meine Elemente für die automatische Vervollständigung der jQuery-Benutzeroberfläche als HTML zu rendern. Die Elemente werden im Autocomplete-Steuerelement korrekt gerendert, aber ich erhalte immer wieder diesen Javascript-Fehler und kann nicht daran vorbeikommen.

Firefox JavaScript-Argument konnte nicht konvertiert werden

Chrome Die Eigenschaft '_renderItem' von undefined kann nicht festgelegt werden

  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);
    };
});

Ich bin mir nicht sicher, warum es diesen Fehler auslöst oder was ich tun muss, um ihn zu überwinden ... Jede Hilfe wird geschätzt.

Da ich gerade beigetreten bin und den obigen Beitrag von drcforbin nicht kommentieren kann , muss ich wohl meine eigene Antwort hinzufügen.

drcforbin ist korrekt, obwohl es wirklich ein anderes Problem ist als das, das das OP hatte. Jeder, der jetzt zu diesem Thread kommt, ist wahrscheinlich mit diesem Problem konfrontiert, da gerade eine neue Version der jQuery-Benutzeroberfläche veröffentlicht wurde. Bestimmte Namenskonventionen in Bezug auf die automatische Vervollständigung wurden in jQuery UI in Version 1.1 veraltet und in Version 1.10 vollständig entfernt (siehe http://jqueryui.com/upgrade-guide/1.10/#autocomplete ).

Was ist verwirrend, ist jedoch, dass sie nur den Übergang von dem Erwähnung item.autocomplete Daten Tag ui-Autocomplete-Artikel , aber der Autocomplete - Daten - Tag wird auch umbenannt ui-Autovervollständigung . Und es ist noch verwirrender, weil die Demos immer noch die alte Syntax verwenden (und daher kaputt sind).

Folgendes muss in der Funktion _renderItem für jQuery UI 1.10.0 in der Demo für benutzerdefinierte Daten hier geändert werden: http://jqueryui.com/autocomplete/#custom-data

Originalcode:

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

Fester Code:

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

Beachten Sie die Änderungen für Autocomplete und item.autocomplete . Ich habe überprüft, ob dies in meinen eigenen Projekten funktioniert.

Ich bin auf das gleiche Problem gestoßen ... scheint in späteren Versionen zu sein, es muss .data("ui-autocomplete")stattdessen sein.data("autocomplete")

Ich weiß, dass ich mit meiner Antwort zu spät komme, aber wenn die Leute in Zukunft es immer noch nicht verstehen

 .data ("ui-autocomplete-item", item)

Um zu arbeiten, versuchen Sie dies

$(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);
    };
  }
 })
});

Es hat bei mir funktioniert und ich hatte ein Problem mit der Anmeldefunktion. Ich konnte mich nicht anmelden, weil es hieß

Nicht erfasster TypeError: Die Eigenschaft '_renderItem' von undefined kann nicht festgelegt werden 

Hoffe das hilft jemandem :)

/ kahin

Ich benutze jquery 1.10.2 und es funktioniert mit:

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

Und jetzt, mit jQuery-2.0.0, ist es der Name Ihres neuen Moduls, ersetzt aber das "." (Punkt) durch das "-" (Bindestrich):

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

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

Posting für alle, die über diesen Post stolpern.

Dieser Fehler tritt auch auf, wenn Sie die .autocomplete nicht in das document ready-Ereignis einfügen.

Der folgende Code schlägt fehl:

<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>

während der folgende Code funktioniert:

<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>

Abhängig von der Version von jquery ui, die Sie verwenden, ist es entweder "autocomplete" oder "ui-autocomplete". Ich habe dieses Update am Combobox-Plugin vorgenommen, um das Problem zu beheben (~ ln 78-85).

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

autoComplete._renderItem = function(ul, item) {

...