Autocompletado de campos con jQuery

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

jQuery.SuggestCada vez es más frecuente encontrarnos en los buscadores, con cajas de búsquedas que nos sugieren palabras o frases, autocompletando el campo al pulsar la tecla de tabulador o intro. El ejemplo más claro de esto lo tenemos en el buscador de Google.

Para implementar este sistema en tu web, sólo necesitarás descargar y activar el plugin jQuery.suggest. Su funcionamiento es el mismo de cualquier formulario con autocompletado donde sólo hay que introducir las primeras letras de la palabra para que automáticamente aparezcan palabras sugeridas, si existen más de una coincidencia para las palabras introducidas se mostrarán puntos suspensivos “…”

Cómo añadir autocompletado a un buscador.

Primero tenemos que añadir la librería jQuery, después el el archivo del plugin. En el encontraremos una variable array que tendrá todas las sugerencias. Para finalizar indicamos el #container (elemento) al que le pasamos el array y las dos opciones de configuración, suggestionColor y moreIndicatorClass, el primero indicará el color del texto sugerido, y el segundo elemento, que aparecerá cuando coincidan más de una palabra sugerida.

var haystack = ["ActionScript", "AppleScript", "Asp", "BASIC", ...];

$(function(){
  $('#container').suggest(haystack, {
    suggestionColor   : '#cccccc',
    moreIndicatorClass: 'suggest-more'
  });
});

Sé la primera persona en comentar

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.