Autocompletado de Múltiples campos Usando jQuery , Ajax , PHP y MySQL

En este tutorial voy a mostrar cómo rellenar varios campos de texto usando el plugin autocomplete de jQuery. Por ejemplo, yo voy a buscar el código de un producto que se encuentra almacenado en mi base de datos usando jQuery autocomplete, el resultado mostrará la lista de nombres de productos que coinciden con la búsqueda. Durante la selección del nombre del producto a partir de cualquiera de los resultados de la búsqueda, se rellenará automáticamente en su respectivo campo los siguientes datos: el código del producto, nombre del producto, precio del producto y el id del producto que se rellenará en un campo oculto.

Paso 1: Crear su base de datos, para el ejemplo se ha utilizado una llamada test

Paso 2: Importar la tabla productos a la base de datos

 

Paso 3: Crear archivo index.html para el jQuery Autocomplete

 

Paso 4: Crear el archivo llamado productos.php que procesará los datos enviados por el jQuery Autocomplete.

DESCARGAR ARCHIVOS
Listo ahora sólo hay que probar el script un tu servidor web.

 

 

  • Hache

    Hola, agradezco antes que nada el esfuerzo pero, tengo un problema con el código ya que no puedo ejecutarlo.

  • Sharkey

    Hola, te agradezco mucho por esta guía y mis felicitaciones por la web!
    Seguí los pasos indicados y me aparecen las sugerencias vacías, tendrás idea que puede provocar esto? https://uploads.disquscdn.com/images/69ad0b2c1e12caa15b9b8f875a360ee2a0a87375f5f63dfca4473149f89babd9.jpg
    Saludos!

  • Alejandro Lariccia

    Hola, me funciono muy bien, pero me surge una gran duda: de donde sale “$_GET[‘term’]”, no entiendo de donde sale la variable ‘term’ o de donde viene. y otra cosa, se puede realizar lo mismo pero conectando a la base de datos mediante el metodo PDO?

    • Obed

      Hola Alejandro, el nombre del variable “term” es llamada desde el plugins Autocomplete https://jqueryui.com/autocomplete/.
      Desde luego que puedes realizar la misma consulta utilizando PDO, pero ello dependerá de tus conocimientos con PDO

  • Pingback: Autocomplete Select2 usando jQuery Ajax, PHP y MySQL - Sistemas Web()

  • Juanma Casafuz

    Hola muchas gracias por tus codigos, tengo la siguente duda; en mi formulario tengo 2 campos distintos para autocompletar, personas y localidad. Personas me autocompleta bien, para localidad clone e hice lo mismo pero no me funciona el autocompletar podrias ayudarme? en la misma bd tengo mi tabla llamada localidad

    • maria beltran

      hola tienes un ejemplo similar a este pero con una base de datos hecha necesito un ejemplo

  • maria beltran

    donde puedo descargar la DB

  • Jorge Leonardo Rincon Suarez

    obed usted es un vacan, viejo gracias por el aporte.

  • César Quintana

    Hola, muy buena guia, muchas gracias por darte el trabajo de compartir. Pero tengo una duda, como puedo cambiar el termino GET “term”, no he podido encontrar una forma de hacerlo ya que necesito hacer distintas búsquedas que están en un mismo archivo PHP . saludos

  • Jurundio

    En mi tabla tiene 1000 registros, y cuando adapto el código a mi base de datos, no me muestra varias campos de autocompletado, solo me muestra un registro, ¿Se puede ampliar la cantidad de opciones de autocompletado?

    • Obed

      El limite de la consulta son 50 registros, pero puedes agregarle mas editando la consulta del archivo productos.php

  • Rony Salguero

    Hola, muy agradecido por tu scrip solo tengo un problema ahorita estoy en un servidor con win 8.1 64bits y no me funciona el autocomplete y cuando lo tenia en win 7 de 32bits me funcionaba de mil maravillas, a que se debe eso disculpa.

    • Obed

      Hola Rony, muchas gracias por tu consulta.
      Decirte que el sistema operativo no tiene nada que ver con funcionamiento del script, pero si tiene mucho que ver el servidor web que estés usando, personalmente lo he probado:
      Windows Version: Windows 8.1 Pro 64-bit
      XAMPP Version: 7.0.13

  • Anderson victoriano goicochea

    hola amigo tengo mi tabla trabajador su id es su dni como lo trabajaria e tratado de seguir los mismos pasos pero o me muestra nada ,mi coneccion esta en otro archivo conexion.php