web-dev-qa-db-fra.com

Impossible de définir la propriété '_renderItem' de l'interface utilisateur jQuery non définie avec complétion automatique avec HTML

J'utilise le code suivant pour rendre mes éléments de saisie semi-automatique de l'interface utilisateur jQuery au format HTML. Les éléments sont correctement rendus dans le contrôle de saisie semi-automatique, mais je continue à avoir cette erreur javascript et je ne peux pas la dépasser.

Firefox Impossible de convertir l'argument JavaScript

Chrome Impossible de définir la propriété '_renderItem' de non définie

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

Vous ne savez pas pourquoi cette erreur est lancée, ou ce que je dois faire pour la surmonter… Toute aide est la bienvenue.

javascriptjqueryjquery-uijquery-autocomplete
67
Carl Weis

Comme je viens juste de rejoindre le groupe et que je ne peux pas commenter le message de drcforbin ci-dessus, je suppose que je dois ajouter ma propre réponse.

drcforbin est correct, bien que le problème soit vraiment différent de celui rencontré par le PO. Tous les utilisateurs de ce fil sont probablement confrontés à ce problème en raison de la nouvelle version de l'interface utilisateur jQuery qui vient de paraître. Certaines conventions de dénomination relatives à l'auto-complétion étaient obsolètes dans jQuery UI dans la v1.9 et ont été complètement supprimées dans la v1.10 (voir http://jqueryui.com/upgrade-guide/1.10/#autocomplete ) .

Ce qui est toutefois déroutant, c’est qu’ils ne mentionnent que la transition de la balise de données item.autocomplete vers ui- autocomplete-item , mais la balise de données autocomplete a également été renommée . ui-autocomplete . Et c'est encore plus déroutant, car les démos utilisent toujours l'ancienne syntaxe (et sont donc cassés).

Voici ce qui doit être changé dans la fonction _renderItem pour jQuery UI 1.10.0 dans la démo Custom Data ici: http://jqueryui.com/autocomplete/#custom-data

Code d'origine:

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

Code fixe:

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

Notez les modifications pour autocomplete et item.autocomplete . J'ai vérifié que cela fonctionne dans mes propres projets.

192
nextgentech

J'ai rencontré le même problème ... semble dans les versions ultérieures, il doit être .data("ui-autocomplete") au lieu de .data("autocomplete")

26
drcforbin

Je sais que je suis en retard avec ma réponse, mais si à l'avenir, les gens ne comprennent toujours pas

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

au travail puis essayez ceci 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);
    };
  }
 })
});

Cela fonctionnait pour moi et j’avais un problème avec la fonction de connexion. Je ne pouvais pas me connecter car cela disait

 Uncaught TypeError: impossible de définir la propriété '_renderItem' de non définie

J'espère que ça aide quelqu'un :)

/ kahin

9
Kahin

J'utilise jQuery 1.10.2 et cela fonctionne avec:

.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

Et maintenant, avec jQuery-2.0.0, c'est le nom de votre nouveau module, mais il remplace le "." (point) par le "-" (tiret):

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.

Publier pour le bien de toute personne qui tombe par hasard sur ce post.

Cette erreur se manifestera également si vous ne placez pas le fichier .autocomplete dans l'événement document ready.

Le code ci-dessous va échouer:

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

pendant que le code ci-dessous fonctionnera:

<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

En fonction de la version de jquery ui que vous utilisez, elle sera soit "autocomplete" soit "ui-autocomplete", j'ai donc mis cette mise à jour dans le plugin combobox pour résoudre le problème (~ 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