Autocompletar con php[DEMO]

Tutoriales de php

En este tutorial vamos a ver como crear un autocompletar con php y mysql utilizando la extensión PDO, para la maquetación haremos uso de bootstrap en su versión 3, he creado la demo para que puedas ver el ejemplo en vivo, y si te interesa, seguir el tutorial.

Ver la demo

Autocompletar con php

Antes de nada, crea la base de datos con la que trabaja el ejemplo con el siguiente script.

Ahora podemos crear el archivo index.php en la raíz y añadimos el siguiente código.

Simplemente es una llamada a los archivos necesarios en la sección head y un par de divs para crear el campo de texto que realizará las búsquedas, y otro más abajo con id busqueda que servirá para mostrar el resultado final.

Ahora podemos crear una carpeta llamada statics, dentro otra llamada js y dentro de ésta un archivo llamado functions.js, dentro colocamos el siguiente código.

Simplemente hacemos una petición ajax con el texto a buscar, y si hay resultados los imprimimos.

Ahora podemos crear en la raíz una carpeta llamada app, dentro otra carpeta llamada instancias y dentro de instancias un archivo llamado autocomplete.php, que es dónde hacemos la petición ajax y añadimos el siguiente código.

Comprobamos si es una petición ajax, y si lo es, hacemos una petición a la clase autocompletar, simplemente eso.

Crea dentro de app un nuevo archivo llamado autocompletar.class.php y añade el siguiente código.

Y eso es todo, con ese sencillo código tenemos un buen comienzo para crear un autocompletar, ahora sólo te falta darle tu toque, espero que te guste y te sea útil, saludos.

Descargar ejemplo completo

44 Comentarios

  1. Leon
  2. israel965
  3. Leon
    • israel965
  4. Roger
    • israel965
  5. Israel Mtz
    • israel965
  6. Jonathan
  7. Mike
    • israel965
  8. Mike
  9. victor
    • israel965
      • victor
      • Pablo
        • israel965
  10. Alejandro
  11. Alberto
    • israel965
      • Alberto
      • rodrigo
    • israel965
  12. Katherin Carrero
    • israel965
  13. Davis
    • israel965
      • Davis
  14. jhony
    • israel965
    • leandro
      • israel965
  15. leandro
    • israel965
      • leandro
        • israel965
          • leandro
          • israel965
  16. leandro
  17. andres alvarez
    • israel965

Añade un comentario

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies
Desarrolla una tienda en tiempo real con Angular 5 y FirestoreAcceder ahora
+ +