Este artículo es la continuación de ‘Tutorial para crear un buscador PHP para web muy sencillo’, debido en gran parte al gran número de peticiones donde nos preguntan cómo poder enriquecer dicho buscador con una función autocomplete en PHP, MySQL y Jquery.

Cierto es que los sistemas de autocompletado están presentes en la mayoría de INPUTS o cajas de entrada, además facilitan al usuario la gestión a realizar contribuyendo a una buena experiencia de usuario (usabilidad).

Ahora bien, es importante desarrollar sistemas rápidos y eficaces, éstos no deben de consumir demasiados recursos con el fin de evitar al usuario molestos tiempos de espera mientras los sistemas de autocompletado se resuelven.

Por un lado, recomendamos elegir la arquitectura adecuada para BBDD de MySQL y por otro minimizar los accesos a la BBDD, con esto ganaremos mucha velocidad.

Cómo en nuestro anterior artículo dedicado al buscador, vamos a seguir utilizando la base de datos de provincias de España y en esta ocasión nos vamos a apoyar en la potencia que nos ofrece la universal galería de Jquery, como dice su lema: ‘escribe menos, haz más’.

El código fuente está comentado con el fín de facilitar su uso. Puedes ver el funcionamiento en la siguiente demo.

Pasos para autocomplete PHP con MySQL y Jquery

1. CONEXIÓN CON LA BASE DE DATOS MYSQL

Al inicio del programa definimos la conexión para la base de datos, a diferencia de nuestro anterior post, aquí vamos a conectar siguiendo la directiva de la nueva versión de PHP 7

<?php// Primero definimos la conexión a la base de datos, para que se fácil 
cambiar los parámetros si procede.define('HOST_DB', 'localhost');  
//Nombre del host, nomalmente localhostdefine('USER_DB', 'root');       
//Usuario de la bbdddefine('PASS_DB', '');          
 //Contraseña de la bbdddefine('NAME_DB', 'spainprov'); //Nombre de la bbdd?>

2. FUNCIONES CONTECTAR Y DESCONECTAR

Una vez más, para facilitar las futuras acciones, defino las funciones para abrir o cerrar conexión con la BBDD, aunque para el ejemplo puede resultar escesivo, es una muy buena práctica para contribuir siempre a la seguridad.

<?php
// Definimos la conexión (versión PHP 7)
function conectar(){
    global $conexion;  
//Definición global para poder utilizar en todo el contexto    
$conexion = mysqli_connect(HOST_DB, USER_DB, PASS_DB, NAME_DB)    
or die ('NO SE HA PODIDO CONECTAR AL MOTOR DE LA BASE DE DATOS');    
mysqli_select_db($conexion, NAME_DB)    or die 
('NO SE ENCUENTRA LA BASE DE DATOS ' . NAME_DB);}
function desconectar(){    
global $conexion;    
mysqli_close($conexion);}
?>

3. CREO UNA FUNCIÓN PARA REALIZAR LA BÚSQUEDA

En nuestro caso queremos completar o mejor dicho autocompletar la caja de búsqueda con las provincias a medida que vayamos tecleando, si se necesitasen usar otras tablas para otros campos o realizar un futuro cambio, tan solo tendríamos que volver a esta función y actualizarla.

<?php
function opciones() {	
global $conexion;      //Variable que contendrá el resultado de la búsqueda	 
$texto = '';	  
conectar();      
mysqli_set_charset($conexion, 'utf8');  
// para indicar a la bbdd que vamos a mostrar la info en utf8	  	  
//Contulta para recoger la información de todas las provincias	  
$sql = "SELECT * FROM provincia ORDER BY provincia";	  	  
$resultado = mysqli_query($conexion, $sql); //Ejecución de la consulta      
//Si hay resultados...	  
if (mysqli_num_rows($resultado) > 0){ 		 
while($fila = mysqli_fetch_assoc($resultado)){ 		      
// se recoge la información según la vamos a pasar a la variable de javascript              
$texto .= '"' . $fila['Provincia'] . '",';			 
}	  	  
}else{			   
$texto = "NO HAY RESULTADOS EN LA BBDD";		  
}	  
// Después de trabajar con la bbdd, cerramos la conexión 
(por seguridad, no hay que dejar conexiones abiertas)	  
mysqli_close($conexion);      	  
return $texto;}
?>

4. INICIAMOS EL TEXTO PARA  AUTOCOMPLETAR

Pasamos el resultado de la búsqueda que realizamos sobre el texto que nos interesa a una variable ‘llamando a la función opciones()’, en nuestro caso vamos a pasar las provincias que contiene nuestra tabla y le vamos a dar un formato válido para que se pueda utilizar en la parte de javaScript, quedando así: «Albacete», «Álava», …

$opciones = opciones();

5. MONTAMOS LA PARTE HTML

Definimos la cabecera con las llamadas a los correspondientes scripts y css.

<!doctype html>
<html>
<head>
<meta charset=»utf-8″>
<title>Buscador web php autocompletado – WebReunidos</title>

// Parte correspondiente a Jquery

<link rel=»stylesheet» href=»//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css»>
<script src=»https://code.jquery.com/jquery-1.12.4.js»></script>
<script src=»https://code.jquery.com/ui/1.12.0/jquery-ui.js»></script>
<script>
$( function() {

// Variable que recoge el resultado de la consulta sobre la tabla Provincias, Jquery trabajará sobre este resultado para dinamizar el funcionamiento.
var availableTags = [<?php echo $opciones ?>];
$( «#buscador» ).autocomplete({
source: availableTags
});
} );
</script>
</head>

6. CUERPO DEL HTML

Por último incluimos el INPUT que va a realizar el trabajo para que sea autocomplete PHP.

<body>

<div class=»ui-widget»>
<label for=»buscador»>Buscador : </label>
<input id=»buscador»>
</div>

</body>
</html>

Con este código ya estamos en condiciones de optimizar el funcionamiento de nuestro buscador php, tal y como decíamos al principio de este artículo que esperamos os sea de mucha utilidad.