javascript - tiempo - No se puede establecer la propiedad ''_renderItem'' de la jQuery UI no definida autocompletar con HTML

jquery no funciona en internet explorer 11

Question

Estoy usando el siguiente código para procesar elementos de autocompletar de mi jQuery UI como HTML. Los elementos se procesan correctamente en el control de autocompletar, pero sigo obteniendo este error de javascript y no puedo pasarlo.

Firefox no pudo convertir el argumento de JavaScript

Chrome no puede establecer la propiedad ''_renderItem'' de undefined

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

No estoy seguro de por qué está arrojando este error, o lo que tengo que hacer para superarlo ... Cualquier ayuda es apreciada.

Answer 1

Como me acabo de unir y no puedo comentar sobre la publicación anterior de drcforbin , creo que debo agregar mi propia respuesta.

drcforbin es correcto, aunque en realidad es un problema diferente al que tuvo el OP. Cualquiera que se acerque a este hilo ahora probablemente esté enfrentando este problema debido a la nueva versión de jQuery UI recién lanzada. Ciertas convenciones de nomenclatura relacionadas con la autocompletar quedaron obsoletas en la interfaz de usuario de jQuery en v1.9 y se eliminaron por completo en v1.10 (ver http://jqueryui.com/upgrade-guide/1.10/#autocomplete ).

Lo que es confuso, sin embargo, es que solo mencionan la transición de la etiqueta de datos item.autocomplete a ui-autocomplete-item , pero la etiqueta de datos de autocompletar también se ha renombrado como ui-autocomplete . Y es aún más confuso porque las demos aún usan la sintaxis anterior (y, por lo tanto, están rotas).

Lo siguiente es lo que necesita cambiar en la función _renderItem para jQuery UI 1.10.0 en la demostración de datos personalizados aquí: http://jqueryui.com/autocomplete/#custom-data

Código original:

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

Código fijo:

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

Tenga en cuenta los cambios para autocompletar y item.autocomplete . Verifiqué que esto funciona en mis propios proyectos.

Answer 2

Dependiendo de la versión de jquery ui que esté usando será "autocompletar" o "ui-autocompletar", realicé esta actualización en el complemento del cuadro combinado para solucionar el problema (~ ln 78-85)

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

autoComplete._renderItem = function(ul, item) {

...

Answer 3

Estoy usando jquery 1.10.2 y funciona usando:

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

Me encontré con el mismo problema ... parece en versiones posteriores, tiene que ser .data("ui-autocomplete") lugar de .data("autocomplete")

Answer 5

Publicando por el bien de cualquier persona que tropiece con esta publicación.

Este error también se manifestará si no coloca el archivo .autocomplete dentro del evento de documento preparado.

El código a continuación fallará:

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

mientras que el siguiente código funcionará:

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

Answer 6

Sé que llego tarde con mi respuesta, pero si las personas en el futuro aún no entienden

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

para trabajar, entonces intente esto 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);
    };
  }
 })
});

Funcionó para mí y estaba teniendo problemas con el funktion de inicio de sesión. No pude iniciar sesión porque decía

Uncaught TypeError: Cannot set property ''_renderItem'' of undefined

Espero que esto ayude a alguien :)

/ kahin

Answer 7

Y ahora, con jQuery-2.0.0, es el nombre de su nuevo módulo, pero reemplazando el "." (punto) por el "-" (guión):

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

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