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

70

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.

Carl Weis
quelle
Gibt es ein Element mit der ID #msg-toauf der Seite?
Andrew Whitaker
Ja, es gibt ... $ ("# msg-to") ist ein Texteingabefeld, an das die .autocomplete gebunden ist.
Carl Weis
1
Zu Ihrer Information, für jeden, der die _renderItem () -Methode verwendet, um etwas ANDERES als die ursprüngliche UL zu füllen (dh eine SELECT-OPTION), konnte ich dies nur durch Rückgabe der LI (wie oben) nach dem Auffüllen des anderen Objekts zum Funktionieren bringen.
Eric Belair

Antworten:

201

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.

nextgentech
quelle
5
Dies hat sich zumindest mit 1.12 wieder geändert. Es ist jetzt .autocomplete ("Instanz") --- Siehe Neueste: jqueryui.com/autocomplete/#custom-data )
LoJo
26

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

drcforbin
quelle
2
Ich sehe den Unterschied nicht
mac10688
10

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

Kahin
quelle
6

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 );
};
AutoCiudad
quelle
5

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) {}
Cyril N.
quelle
3

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>
Johnie Karr
quelle
dies die Ursache für meine „Kann nicht gesetzt Eigenschaft‚_renderItem‘undefinierten“ innerhalb eines Jasmine spec war
ks
1

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

...

Michael Angstadt
quelle