Autocompletar con bootstrap PHP MySQL Ajax

Autocompletar con bootstrap PHP MySQL Ajax. Este articulo nos enfocaremos de cómo podemos cargar datos de forma dinámica para una lista desplegable para autocompletar palabras. De plano, para darle elegancia a este procedimiento usaremos lo último en framework para estilos, nos referimos, a Bootstrap. Si embargo, usaremos también otros leguajes como ser JQuery y Ajax para vincular al PHP MySQL, para que estos muestren información dinámica.

Autocompletar con bootstrap PHP MySQL Ajax

Para este ejemplo usaremos una lista de países y que podremos autocompletar un input. Almacenaremos países en una tabla de base de datos.

Los recursos que usaremos para este ejemplo

• PHP como lenguaje de programación
• Base de datos MySQL para almacenar la información
• JQuery Ajax callback para suministrar typeahead Source

Autocompletado dinámico usando base de datos

Mostrando las librerias externas que usaremos para este ejemplos

<link rel="stylesheet" type="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>
<script type="text/javascript" src="js/typeahead.js"></script>

1. Creando nuestra base de datos para almacenar la lista de países para este tutoria

CREATE TABLE `lista_paises` (
  `id_pais` int(11) NOT NULL,
  `pais_nombre` varchar(150) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='Lista de Paises' ROW_FORMAT=COMPACT;

--
-- Volcado de datos para la tabla `lista_paises`
--

INSERT INTO `lista_paises` (`id_pais`, `pais_nombre`) VALUES
(1, 'Angola'),
(2, 'Albania'),
(3, 'Bahamas'),
(4, 'Bahrain'),
(5, 'Cambodia'),
(6, 'Cameroon'),
(7, 'Denmark'),
(8, 'Djibouti'),
(9, 'East Timor'),
(10, 'Ecuador'),
(11, 'Falkland Islands (Malvinas)'),
(12, 'Faroe Islands'),
(13, 'Gabon'),
(14, 'Gambia'),
(15, 'Haiti'),
(16, 'Heard and Mc Donald Islands'),
(17, 'Iceland'),
(18, 'India'),
(19, 'Jamaica'),
(20, 'Japan'),
(21, 'Kenya'),
(22, 'Kiribati'),
(23, 'Lao People\'s Democratic Republic'),
(24, 'Latvia'),
(25, 'Macau'),
(26, 'Macedonia'),
(27, 'Namibia'),
(28, 'Nauru'),
(29, 'Oman'),
(30, 'Pakistan'),
(31, 'Palau'),
(32, 'Qatar'),
(33, 'Reunion'),
(34, 'Romania'),
(35, 'Saint Kitts and Nevis'),
(36, 'Saint Lucia'),
(37, 'Taiwan'),
(38, 'Tajikistan'),
(39, 'Uganda'),
(40, 'Ukraine'),
(41, 'Vanuatu'),
(42, 'Vatican City State'),
(43, 'Wallis and Futuna Islands'),
(44, 'Western Sahara'),
(45, 'Yemen'),
(46, 'Yugoslavia'),
(47, 'Zaire'),
(48, 'Zambia');

--
-- Índices para tablas volcadas
--

--
-- Indices de la tabla `lista_paises`
--
ALTER TABLE `lista_paises`
  ADD PRIMARY KEY (`id_pais`);

--
-- AUTO_INCREMENT de las tablas volcadas
--

--
-- AUTO_INCREMENT de la tabla `lista_paises`
--
ALTER TABLE `lista_paises`
  MODIFY `id_pais` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=49;

2. Crear un archivo PHP llamado index.php

Este fichero contendrá nuestro formulario y también el código de jQuery que hará la búsqueda.

<!--Elementos de formulario que realizara la busqueda-->
	<div class="lista-color">
		<label class="Busca-pais">Busca tu País:</label><br/> 
        <input type="text" name="MiPais" id="MiPais"  class="form-control"/>
	</div>
<!--Fin elementos de formulario que realizara la busqueda-->

Mostrando el contenido de nuestro JQuery para llamar a los datos

<script>
    $(document).ready(function () {
        $('#MiPais').typeahead({
            source: function (busqueda, resultado) {
                $.ajax({
                    url: "consulta.php",
					data: 'busqueda=' + busqueda,            
                    dataType: "json",
                    type: "POST",
                    success: function (data) {
						resultado($.map(data, function (item) {
							return item;
                        }));
                    }
                });
            }
        });
    });
</script>

3. Fichero consulta.php

Este archivo será el más importante porque dentro de él se realizará las consultas requeridas para mostrar en el autocompletar que estamos creando. Veremos aquí la conexión MySQL y los resultados para mostrar en la lista desplegable de lista de paises.

<?php	
// Procesamos en envio desde el input via POST
$palabraclave = strval($_POST['busqueda']);
$busqueda = "{$palabraclave}%";
// Realizamos la conexión MySQLi
$conexion =new mysqli('localhost', 'root', '' , 'php_autocompletar');
// Preparamos la consulta para realizar la busqueda del criterio
$consultaDB = $conexion->prepare("SELECT * FROM lista_paises WHERE pais_nombre LIKE ?");
$consultaDB->bind_param("s",$busqueda);			
$consultaDB->execute();
$resultado = $consultaDB->get_result();
// Condicional para tratar a los resultados encontrados
if ($resultado->num_rows > 0) {
	while($registros = $resultado->fetch_assoc()) {
	// Llamando a la columna Pais_Nombre
	$ResultadoPais[] = $registros["pais_nombre"];
	}
	echo json_encode($ResultadoPais);
	}
// Cerramos la conexión con el servidor
$consultaDB->close();
?>

CONCLUSIÓN

Si bien en tutoriales pasados vimos cómo generar listas despegables usando JavaScript. En esta oportunidad nos enfocaremos en utilizar en lo último en tecnología, nos referimos a Bootstrap.

Estas librerías son gratuitas y debemos aprovechar al máximo para usarlo en nuestros proyectos.

DESCARGA

Dejaremos el código fuente para que ustedes lo adapten a sus necesidades.

Descargar autocompletar con bootstrap PHP MySQL

1 archivo(s) 425.29 KB

Descargar