Pedir presupuesto

Función Autocompletar con jQuery

Por todos es sabido la gran facilidad de uso de jQuery, y lo mucho que nos ayuda a la hora de implementar código en una página web. Esta vez os dejo un pequeño tutorial para hacer un Autocompletado por ejemplo en una caja de texto para hacer una busqueda. Si no sabeis de que estoy hablando probad este ejemplo poniendo «Cro»:

Autocompletado con jQuery

Pues esto es tan simple como descargarte los archivos que detallo a continuación:

  1. jQuery Suggest 1
  2. jQuery Suggest mini
  3. jQuery
  4. Gif de la imagen cargando.

E implementar el código de la siguiente manera:

 

Código HTML

 

[html]

Escribe sobre la caja de tecto para ver el autocompletado, en este caso, el mínimo de caracteres para que empiece a trabajar es 3. Prueba poniendo por ejemplo CRO

The code used[/html]Ahora antes de mostrar el código Javascript os dejo la forma en que le damos un poco de estilo a esto con CSS:[css]

[/css]

Código Javascript

Para hacer la llamada a las librerias y al evento de autocompletar, tendremos que poner lo siguiente:

[js]

[/js]

Como veis, la función Javascript tiene una llamada a un archivo llamado autocompletar.html donde están todas las opciones de busqueda, es decir:

[html]

  • Aeroplane
  • Border
  • Crops
  • Desalination
  • Elephants

[/html]

Ahora solo nos queda saber un poco más de esta API para poder modificar algunos aspectos. Por defecto vienen así configurado:

[js]$.fn.jSuggest.defaults = {
minchar: 3,
opacity: 1.0,
zindex: 20000,
delay: 2500,
loadingImg: ‘ajax-loader.gif’,
loadingText: ‘Loading…’,
autoChange: false,
url: «»,
type: «GET»,
data: «»
};[/js]

Minchar: El mínimo de caracteres que el usuario debe introducir para que comience el autocompletado.
Opacity: Transparencia del Autocompletado.
Zindex: Z-Index del autocompletado.
delay: Numero en milisegundos del retardo.
loadingImg: La imagen que aparecerá cuando este cargando.
LoadinText: Como la anterior pero con el texto.
AutoChange: Si esta a TRUE, cambia el texto en la caja de texto cuando esta encima o se selecciona. Si esta a FALSE, se cambiará cuando se haga clic o cuando se le de a la tecla INTRO.
Url: Dirección de tu autocompletado.
Type: Get o Post

Puedes descargar el ejemplo aquí

Via: Gimiti

¿Te ha gustado?, Comparte!!

Compartir en facebook
Compartir en twitter
Compartir en linkedin
Compartir en whatsapp
Compartir en email

22 comentarios

  1. Pues lo descarge y lo probe pero realmente no hace la busqueda sobre lo que estas escribiendo, ya que le agrege una lista de 10 palabras y no importa lo que escriba me trae la lista del autocompletar.html,

  2. ricardo y FASDFA:

    la página «autocompletar.html» en este caso es estática y siempre te regresará los mismos resultados.
    Prueba generar los datos con algún autocompletar.jsp o autocompletar.php que tenga acceso a tu base de datos.

    Saludos.

  3. Para aclarar un poco mas: El jquery trae la pagina entera, lo que se puede hacer es filtrar previamente basados en la variable que obtiene el archivo .php o .jsp o lo que sea e imprimir solamente lo que coincide…

  4. Hola, yo realice ese cambio…una pagina html por un script php y realiza la busqueda, pero me permite realizar solo una…cuando borro y busco nuevamente me lanza un error (el que puse cuando no encuentra nada). Para poder realizar otra busqueda tengo que refrescar la pagina.

    😮

    que puedo hacer??? :s

  5. Hola! me ocurre lo mismo que a Humberto, funciona todo bien hasta que quiero realizar una nueva búsqueda, y ya no arroja nuevos resultados.
    Alguien tiene la solución a esto?
    Se lo agradecería mucho!
    Saludos cordiales

  6. tiene que modificar el script.
    linea 95:
    opts.data = $(this).serialize();
    la modifique por:
    opts.data2 = $(this).serialize();

    linea 97:
    opts.data = opts.data + «=» + $(this).val();
    yo la modifique por:
    opts.data2 = opts.data + «=» + $(this).val();

    linea 103:
    data: opts.data,
    la cambie por:
    data: opts.data2,

  7. He revisado lo que ocurre, y es que cuando se hace la llamada a ajax, la variable queryString ‘acumula’ todas las busquedas:

    luego de 4 ‘busquedas’ el searchQuery va quedando así:

    cro=air=xxx=dddd

  8. admin, a mi me ha funcionado, y ya puedo continuar con mi trabajo, quizas hiciste algo mal… solamente modifica lo indicado, es probable que hayas movido otras cosas… y obviamente ‘autocompletar.html’ debe ser dinámico, ya que si es el del ejemplo, por más que modifiques el script, siempre tendrás los mismos resultados… la modificación del script es para aquellos que solo les trabaja la primera busqueda y ya no las siguientes…

  9. Hola, hay una posibilidad de hacer linkiables los nombres que se encuentran en el archivo localdata.js, si pudieran decirme se los agradeceria.
    Eduardo

  10. Funciona bien, lo hice con un archivo jsp para que fuera dinamico. la pregunta es como se haria para que al momento de seleccionar un registro, te cargue a la caja de texto el id del registro y no lo que se muestra.

    Mil gracias

  11. hola.
    El codigo no seria desde jquery, creo que independientemente de la tecnologia que se utilice se podria hacer. veo que crean una lista en una pagina html, lo que yo hago es crear esa lista dinamicamente desde una consulta a la base de datos. Nose si depronto toque crear algo adicional en la lista, nose.
    Gracias.

  12. Hola a todos. He realizado todos los pasos indicados en el post y también las modificaciones que se han comentado en los comentarios, pero mi problema es que escriba lo que escriba en el cuadro de búsqueda, siempre me muestra toda la lista.

    Por ejemplo, en el ejemplo que se da arriba, al escribir CRO, o DSF o PPP, no me filtra la busqueda, sino que me muestra la lista entera:

    Aeroplane
    Border
    Crops
    Desalination
    Elephants

    Igualmente si obtengo los elementos de la lista desde una BBDD.

    ¿Alguien podria ayudarme? Muchas gracias

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

¡Pide tu presupuesto!

Completa los campos para poder enviarte un presupuesto

Todos y tu presupuesto son a medida y totalmente personalizados, entendemos que dos proyectos online no pueden ser iguales y que cada cliente tiene unos objetivos y necesidades muy diferentes, es por eso que para elaborar un presupuesto, necesitamos saber de ti, tu proyecto y objetivos.

Los campos marcados con (*) son obligatorios.

La comunicación enviada quedará incorporada a un fichero del que es responsable COLORDEU. Esta comunicación se utilizará exclusivamente para tratar sus datos para atender su solicitud, siempre de acuerdo al Reglamento (UE) 2016/679 (RGPD), la Ley Orgánica 15/1999 (LOPD) y el Real Decreto 1720/2007 de desarrollo de la LOPD), sobre protección de datos. Sus datos no se comunicarán a terceros, excepto por obligación legal, y se mantendrán mientras no solicite su cancelación. En cualquier momento usted puede ejercer los derechos de acceso, rectificación, portabilidad y oposición, o si procede, a la limitación y/o cancelación del tratamiento, comunicándolo por escrito, indicando sus datos personales mediante un email a hola@colordeu.es