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

Question

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 n'a pas pu convertir l'argument JavaScript

Chrome ne peut pas 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 trop pourquoi cette erreur est lancée ou ce que je dois faire pour la surmonter… Toute aide est la bienvenue.

Answer 1

Depuis que j'ai rejoint et ne peux pas commenter sur drcforbin'post ci-dessus, je suppose que je dois ajouter à ma propre réponse.

drcforbin est correct, même si c'est vraiment un problème différent de celui que l'OP avait. Toute personne venant sur ce fil de discussion est maintenant probablement confrontés à ce problème, en raison de la nouvelle version de jQuery UI vient d'être publié. Certaines conventions de nommage concernant la saisie semi-automatique ont été désapprouvées dans jQuery UI dans v1.9 et ont été complètement retirés de la v1.10 (voir http://jqueryui.com/upgrade-guide/1.10/#autocomplete).

Ce qui est déroutant, cependant, est qu'ils ne mentionnent le passage de l' élément.la saisie semi-automatique des données de la balise de l'interface utilisateur-la saisie semi-automatique-élément, mais la saisie semi-automatique des données de la balise a également été renommé de l'interface utilisateur-la saisie semi-automatique. Et c'est encore plus de confusion, car les démos sont toujours à l'aide de l'ancienne syntaxe (et donc sont cassés).

La suivante est ce qui doit changer dans la _renderItem fonction de jQuery UI 1.10.0 dans les Données Personnalisées démo 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 );
};

Remarque les modifications à la fois la saisie semi-automatique et de l'élément.la saisie semi-automatique. J'ai vérifié que cela fonctionne dans mes propres projets.

Answer 2

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

Answer 3

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

 .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 a fonctionné pour moi et j'avais un problème avec la fonction de connexion. Je ne pouvais pas me connecter car il était écrit

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

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

/ kahin

Answer 4

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

Answer 5

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