Alguien podría indicarme como realizar un autocomplete igual al de la imagen cuyos resultados lo muestra en una tabla propiamente del autocomplete. Espero sus comentarios y/o sugerencias.
1 respuesta
Tomando en cuenta que los valores de respuesta los tienes dentro del html en una tabla o lista ocultos, el siguiente script hecho con jQuery hace la coincidencia según la palabra escrita por el ususario y lo muestra.
$("#filter").keyup(function(){
// Recupera el texto del campo de entrada y restablece el conteo a cero
var filter = $(this).val(), count = 0;
// Recorrer la tabla de respuestas
$("#table tr td").each(function(){
// Si el elemento de la tabla no contiene la frase de texto, difumína.
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();
// Mostrar el elemento de la tabla si la frase coincide e incrementa el contador a 1
} else {
$(this).show();
count++;
}
});
// Actualiza el contador
var numberItems = count;
// Esto solo muestra en numero de coincidencias
$("#filter-count").text("Coincidencias = "+count);
});
Solo necesitas renombrar los id tanto de tu input del buscador, como el de los datos ocultos que quieres mostrar, si los quisieras o tuvieras en una lista cambiarias #table tr td por #lista li.