Autocomplete en Bootstrap usando PHP – MySQLi – AJAX

En este tutorial, te vamos a mostrar cómo crear un Autocomplete en Bootstrap  usando PHP – MySQLi –  AJAX.  En este ejemplo se presenta una lista de sugerencias de datos cargadas desde una tabla en nuestra base de datos.

Creando nuestra base de datos

El primer paso es crear nuestra base de datos.
1. Abre phpMyAdmin.
2. Haz clic en bases de datos, crea una base de datos y asigna el nombre que desees, para este tutorial nosotros la hemos llamado “test_ajax_search”, pero tu puedes nombrarla como desees .
3. Después de crear una base de datos, haz clic en la pestaña “SQL” y ejecuta el siguiente código:

Creando nuestra conexión

 El siguiente paso es crear una conexión a la base de datos y guardarla como “conn.php”. Este archivo servirá como nuestro puente entre nuestro formulario y nuestra base de datos. Para crear el archivo, abre tu editor de código HTML y pega el siguiente código.

Creando nuestro formulario de búsqueda

El siguiente paso es crear nuestro formulario de búsqueda. Además, ten en cuenta que los archivos CSS y script que se han utilizado para este tutorial están alojados en un servidor remoto, por lo que es necesario que tengas una conexión a  Internet para que puedas desarrollar este tutorial. Nombraremos al archivo como  “index.php”.

Creando nuestro código de búsqueda

A continuación, creamos nuestro código de búsqueda. Este código será el que obtenga los datos de nuestra base de datos. Nombramos este archivo como “search.php”.

Creando nuestra página de resultados

El siguiente paso es crear nuestra página de resultados para nuestro formulario de búsqueda en caso de que el usuario elija ingresar texto de búsqueda. Llamamos esto como “result.php”.

Creando nuestra página de salida

Por último, creamos nuestra página de salida. Esta página mostrará los resultados de nuestras búsquedas. Llamamos esto como “user.php”.

Hasta aquí llega nuestro tutorial. En caso de que tengas problemas con la base de datos, hemos incluido una base de datos de ejemplo en el archivo descargable de este tutorial ubicado en la carpeta ‘db’. Si tienes algún comentario o pregunta, no dudes en comentar a continuación.

Anuncios