Tutorial #38 del Curso de Jquery, en este tutorial veremos como utilizar el método autocomplete con ajax para obtener busquedas dinámicas desde la base de datos mediante el uso de php y mysql.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JQuery UI - autocomplete - Ajax</title>
<link href="jquery-ui/jquery-ui.css" rel="stylesheet">
</head>
<body>
<label for="color">Color</label>
<input type="text" id="color">
<script src="js/jquery-2.1.3.min.js"></script>
<script src="jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#color').autocomplete({
source: function(request, response){
$.ajax({
url:"colores.php",
dataType:"json",
data:{q:request.term},
success: function(data){
response(data);
}
});
},
minLength: 1,
select: function(event,ui){
alert("Selecciono: "+ ui.item.label);
}
});
});
</script>
</body>
</html>colores.php
<?php
$conexion = new mysqli("localhost", "root", "", "prueba");
$color = $_GET['q'];
$resultado = $conexion->query("SELECT * FROM colores WHERE nombre LIKE '%$color%'");
$datos = array();
while ($row=$resultado->fetch_assoc()){
$datos[] = $row['nombre'];
}
echo json_encode($datos);Base de datos:
-- -- Estructura de tabla para la tabla `colores` -- CREATE TABLE IF NOT EXISTS `colores` ( `id` int(11) NOT NULL, `nombre` varchar(50) NOT NULL ) ENGINE=InnoDB AUTO_INCREMENT=14 DEFAULT CHARSET=latin1; -- -- Volcado de datos para la tabla `colores` -- INSERT INTO `colores` (`id`, `nombre`) VALUES (1, 'rojo'), (2, 'azul'), (3, 'verde'), (4, 'naranja'), (5, 'rosado'), (6, 'violeta'), (7, 'amarillo'), (8, 'plateado'), (9, 'dorado'), (10, 'magenta'), (11, 'negro'), (12, 'blanco'), (13, 'celeste'); -- -- Índices para tablas volcadas -- -- -- Indices de la tabla `colores` -- ALTER TABLE `colores` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT de las tablas volcadas -- -- -- AUTO_INCREMENT de la tabla `colores` -- ALTER TABLE `colores` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=14; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;