JQuery biblioteca de JavaScriptLenguaje PHP

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);
Autocompletar con jQuery, Mysql y PHP PDO
Autocompletar con jQuery, Mysql y PHP PDO

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

Descargar Código Fuente

 

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad