Estoy usando un autocompletado de jquery con combobox nabled. Quiero mostrar una opción vacía; sin embargo, cuando establezco el valor de mi selección inicial en una cadena vacía, no aparece en el cuadro combinado.¿Cómo puedo mostrar una opción en blanco en jquery autocompletar?
El artículo está presente, simplemente no contiene altura.
¿Es posible tener una opción en blanco en un combobox de autocompletar?
Así que descubrimos la solución. Necesita trabajar con el método _renderItem.
input.data("autocomplete")._renderItem = function(ul, item) {
var listItem;
if (item.label == "<strong></strong>") {
listItem = $("<li></li>")
.data("item.autocomplete", item)
.append("<a><br></a>")
.appendTo(ul);
} else {
listItem = $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
}
return listItem;
};
Tenga en cuenta que debe tener un elemento de serie en blanco en su lista inicial para que esto funcione.
maravilloso: D, gracias !!!! –
que tenían el mismo problema, resuelto de esta manera:
$autocomplete.data("autocomplete")._renderItem = function(ul, item) {
return $j("<li></li>")
.data("item.autocomplete", item)
.append(item.label === '' ? '<a> </a>' : "<a>" + item.label + "</a>")
.appendTo(ul);
}
Cuando etiqueta del elemento está vacío (item.label === '') Acabo de añadir un enlace que contiene un espacio de no separación ( ) en lugar de la etiqueta.
EDIT:
me di cuenta de que esto podría introducir una vulnerabilidad XSS. Asegúrese de salir de la etiqueta del elemento si podría contener datos del usuario. O bien utilizar alguna función de escape, por ejemplo underscore.js's escape function:
"<a>" + _.escape(item.label) + "</a>"
o construir el elemento de anclaje usando jQuery así:
$('<a/>').text(item.label)
Esto funcionó para mí. Sin embargo, tuve que usar 'ui-autocomplete' para el elemento de datos. –
Las dos soluciones incluidas en este documento no funcionó para mí. _renderItem ni siquiera se llama para las opciones vacías.
Esto es lo que funcionó para mí: hice una edición muy pequeña de la función que mapea las opciones Seleccionar para autocompletar elementos.
response(select.children("option").map(function() {
var text = $(this).text();
if (/*this.value && */(!request.term || matcher.test(text)))
return {
label: text.replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
$.ui.autocomplete.escapeRegex(request.term) +
")(?![^<>]*>)(?![^&;]+;)", "gi"
), "<strong>$1</strong>"),
value: text,
option: this
};
}));
Todo lo que hice fue comentar parte de la condición.
/*this.value && */
Luego agregué a mi hoja de estilos una regla para los elementos de autocompletar.
.ui-autocomplete .ui-menu-item a
{
min-height: 15px;
}
$("#ctrl").autocomplete({
source: [ "\u00A0", "One", "Two" ]
});
Me gusta esta solución, muy fácil de configurar. Aclamaciones – asgeo1
tuve este problema recientemente y mientras que otras soluciones eran en su mayoría correcto me pareció que había un paso que falta.
if (this.value && (!request.term || matcher.test(text)))
necesita ser cambiado a
if (!request.term || matcher.test(text))
de lo contrario no habrá elementos vacíos en la fuente.
Al igual que con las otras soluciones, cambiar _renderItem a
input.data('autocomplete')._renderItem = function(ul, item) {
return $('<li></li>')
.data('item.autocomplete', item)
.append(item.label === '<strong></strong>' ? '<a> </a>' : '<a>' + item.label + '</a>')
.appendTo(ul);
}
Ésta es una mezcla de la solución de la BentOnCoding y Tim Büthe
has necesitado añadiendo un '
' a la parte superior de la lista de sugerencias después obtiene las sugerencias? podrías insertarlo en el evento 'abierto'. – oroloEsto no funciona porque el combobox reduce la altura de la línea a nada sin contenido real. – BentOnCoding