Autocompletar con jQuery, Mysql y PHP PDO

Autocompletar con jQuery, Mysql y PHP PDO. Este artículo nos enseñara como realizar la conexión desde PHP con la base de datos usando el PDO para nuestro sistema de autocompletar. Sin embargo, con esta conexión realizaremos nuestra búsqueda.

Autocompletar con jQuery, Mysql y PHP PDO

¿Cómo funciona este sistema autocompletar?

• Funciona en base de un formulario HTML con el método de envio POST
• Básicamente trabaja en un input para realizar el autocompletar de palabras que el sistema busca en la base de datos, utilizando un id llamado «titulo» con lo cual se vincula dinámicamente con el PHP y MySQL.
• Una vez culminado el autocompletar de input existe botón tipo submit para mostrar más datos referentes a la búsqueda.

Crear una base de datos con una tabla llamada «TITULOS»

CREATE TABLE `titulos` (
  `id` int(11) NOT NULL,
  `nombres` varchar(250) CHARACTER SET utf8 DEFAULT NULL,
  `email` varchar(250) CHARACTER SET utf8 DEFAULT NULL,
  `titulo` varchar(250) CHARACTER SET utf8 DEFAULT NULL,
  `descripcion` text CHARACTER SET utf8
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

ALTER TABLE `titulos`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `titulos`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=15;

Libreria a utilizar

<link rel="stylesheet" te cype="text/css" href="bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<script>
            $(function () {
                $("#titulo").autocomplete({
                    source: 'proceso_busqueda.php'
                });
            });
        </script>

Fichero bd.php, la conexion con el servidor de base de datos

En este fichero tenemos que modificar las credenciales del servidor de datos mysql. Es decir, el usuario y la contraseña.

//Creando los parametros para la conexion con la base de datos
define('LOCALHOST', 'localhost');
define('USERBD', 'root');
define('PASSWORD', '');
define('DBNOMBRE', 'php_autocomplete');

$coneccion = new PDO('mysql:host='.LOCALHOST.';dbname='.DBNOMBRE.';',USERBD, PASSWORD);

Fichero proceso_busqueda.php

$titulo = filter_input(INPUT_GET, 'term', FILTER_SANITIZE_STRING);

//SQL para selecionar os registros
$resultado_titulo = "SELECT titulo FROM titulos WHERE titulo LIKE '%".$titulo."%' ORDER BY titulo ASC LIMIT 7";

//Seleciona os registros
$resultado_contenido = $coneccion->prepare($resultado_titulo);
$resultado_contenido->execute();

while($registros = $resultado_contenido->fetch(PDO::FETCH_ASSOC)){
    $data[] = $registros['titulo'];
}

echo json_encode($data);

CONCLUSIÓN

La implementación de este pequeño sistema nos ahorra bastantes recursos de nuestro servidor, por ejemplo bajar la tasa de trasferencia de datos mensual.

Además, no refrescara la página con lo cual nos ahorrara tiempo a la hora de ejecutar peticiones a la base de datos.

DESCARGA

buscar autocomplete php