event - jQuery Autocompletar.data("autocompletar") no está definido
jquery autocomplete select example (6)
Cuando intento implementar la función Autocompletar con el código que aparece a continuación, aparece un error que indica:
.data("autocomplete") is undefined
Sin embargo, si quito el método .data () del final, funciona bien (solo sin los gráficos personalizables que proporciona .data ()). ¿Alguien puede decirme qué está mal?
$("input#testInput").bind("autocompleteselect", function (event, ui) {
}).autocomplete({
appendTo: "#autoCompList",
source: function (request, response) {
$.ajax({
url: JSONP CALL URL
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function (data) {
response($.map(data.data, function (item) {
fbPageJson = item;
return {
label: item.name,
image: item.picture,
json: item,
}
}));
},
});
}
}).data("autocomplete")._renderItem = function (ul, item) {
return $("<li></li>").data("item.autocomplete", item).append("<a><img src=''" + item.image + "'' alt=''no photo''/></a>" + item.label).appendTo(ul);
};
¡Encontré la solución!
Algunas personas piensan que "ui-autocompletar" es incorrecto, por lo que usan "autocompletar" o "uiAutocompletar", pero eso es incorrecto. En realidad, "ui-autocompletar" es la forma correcta de hacer esto.
Tengo el mismo problema que usted, y encuentro con un amigo el problema de este código. En lugar:
.data(''ui-autocomplete'')._renderItem = function (ul, item) {
if (!_.include(self.idArr, item.id)) {
return $(''<li></li>'').data(''ui-autocomplete-item'', item).append(''<a>'' + item.name + ''</a>'').appendTo(ul);
}
};
Utilizar:
._renderItem = function (ul, item) {
if (!_.include(self.idArr, item.id)) {
return $(''<li></li>'').data(''ui-autocomplete-item'', item).append(''<a>'' + item.name + ''</a>'').appendTo(ul);
}
};
Creo que combobox y autocompletar devuelven datos (''ui-autocomplete''), así que si escribes .data (''ui-autocomplete'') estás haciendo algo como:
.data(''ui-autocomplete'').data(''ui-autocomplete'')
Qué está mal ... bueno, en realidad no sé por qué esto no funciona y por qué sin esto funciona, pero confía en mí, borra .data (''ui-autocomplete'') y sé feliz.
En realidad, en su función de éxito, está llamando la response y devolviendo un objeto como
return {
label: item.name,
image: item.picture,
json: item,
}
pero en la siguiente linea
return $("<li></li>").data("item.autocomplete", item).append("<a><img src=''" + item.image + "'' alt=''no photo''/></a>" + item.label + " Number of Likes: " + item.likes).appendTo(ul);
está utilizando item.likes que no está disponible en su objeto devuelto, por lo que es el problema. Creo que puedes usarlo como
success:function(data) {
var result = $.map(data, function (item){
return {
label: item.name,
image: item.picture,
item.likes
};
});
response(result);
}
También mantenga el item.label dentro de <a></a> (puede que no sea la causa del error), como
return $("<li></li>").data("item.autocomplete", item).append("<a><img src=''" + item.image + "'' alt=''no photo''/>"+item.label+"</a>").appendTo(ul);
y asegurate en la siguiente linea
$.map(data.data, function (item) // notice data.data
si debe ser data.data o solo data . También puedes eliminar el objeto json: item del objeto porque, en lo que a mí respecta, no lo usaste en ningún lugar.
Actualización: Modificar línea siguiente
.data("autocomplete")._renderItem = function (ul, item) {...};
a
.data("autocomplete")?._renderItem = function (ul, item) {...}; // notice the ? mark
o
if(typeof $(''#Your_Input_Id'').val()!="undefined")
{
$(''#Your_Input_Id'').autocomplete({....});
}
o
var mydata=$(''#Your_Input_Id'').autocomplete(...).data(''autocomplete'');
if(mydata)
mydata._renderItem = function (ul, item) {...};
Puede implementar la línea mencionada abajo
.autocomplete ("instancia") ._ renderItem = function (ul, item) {
en estado de
.data ("autocompletar") ._ renderItem = function (ul, item) {
según la documentación disponible en el sitio de Jquery, documentación de autocompletado de Jquery y en el ejemplo encontrará este código.
a partir de la versión actualizada de jquery 1.10 han realizado cambios en el código. Espero que esto te ayudará.
Si observa el último ejemplo de combobox en la demostración del sitio, verá que usan datos (''ui-Autocomplete''). Me encontré con el mismo problema que tú. Anteriormente estaba usando jquery-1.6.2 y jquery-ui-1.8.16. Una vez que actualicé mis archivos a jquery-1.9.1 y jquery-ui-1.10.0 se solucionó el error. Supongo que el autocompletado de jquery-ui anterior no estaba configurando la propiedad data (''ui-Autocomplete''), por lo tanto, era nulo / no definido cuando se recuperaba. Espero que esto ayude a otras personas ya que probablemente ya haya solucionado el problema.
Tuve el mismo problema y, según la versión 1.10.0 de jquery ui, creo que deberías intentarlo.
data(''uiAutocomplete'')
en lugar de
data(''autocomplete'')
Basado en el comentario de Johnny, verifiqué cómo funciona la función .data (). Sí, jQuery devuelve nulo desde .data () cuando el selector no encuentra ningún elemento.
Por lo tanto, si no hay un elemento coincidente para su selector, entonces no se crea y agrega ningún objeto autocompletado al objeto de datos personalizado.
Así que parece que es mejor hacer esto:
$(selector).autocomplete({ your autocomplete config props here });
if ( $(selector).data() ) {
// some jQueryUI versions may use different keys for the object. so to make sure,
// put a breakpoint on the following line and add a watch for $(selector).data().
// then you can find out what key is used by your jQueryUI script.
var ac = $(selector).data(''uiAutocomplete'');
if ( ac ) {
// do what you want with the autoComplete object. below is the changed version of an example from jqueryUI autocomplete tutorial
ac._renderItem = function(ul, item) {
return $("<li>")
.append("<a>" + item.label + "</a>")
.appendTo(ul);
};
}
}
data(''ui-Autocomplete'') resolvieron mis problemas. Creo que es de jquery 1.7 con jquery-ui 1.8 . data(''autocomplete'') estaban bien. El mismo script con una versión reciente de estos archivos no funciona.