Ver en ASP.Net
En esta ocasión voy a mostrarles como utilizar la función Autocompletar de jQuery utilizando PHP, MySQL y JSON.
Vale la pena comentar que me costó trabajo migrar este código desde Asp.Net, debido a unas, casi insignificantes, diferencias en la forma de tratar la función $.ajax de jQuery. Si se dan el tiempo de revisar el tutorial en ASP.Net se darán cuenta a lo que me refiero. Aún así, me he asegurado de hacer el ejercicio lo mas claro y fácil posible. Ya me he encargado de pulir el código, de tal manera que sea sencillo escalarlo segun la creatividad de cada quien. Ahora si,... ¡Manos a la obra!
En mi servidor MySQL tengo una base de datos (schema) llamada "ejemplos" con una tabla llamada "ubicaciones" con los siguientes datos:
Lo primero que hay que hacer es agregar una página PHP llamada "jquery-autocomplete.php", la cual tendría el siguiente código base:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<?php
// put your code here
?>
</body>
</html>
A continuación, vamos a agregar varias referencias de estilos y javascript. Modificamos el head de nuestro documento para que quede así:
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<form id="form1">
<div class="container-fluid">
<h1>Autocompletar jQuery con PHP</h1>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<input id="txtBuscar" placeholder="Texto a buscar..." type="text" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label>Valor Seleccionado:</label>
<input id="txtValor" placeholder="0" type="text" class="form-control" />
</div>
</div>
</div>
</div>
</form>
</body>
Justo debajo del código anterior, agregaremos un script:
<body>
<form id="form1">
...
</form>
<script type="text/javascript">
$("#txtBuscar").autocomplete({
source: function (request, response) {
/*Aquí se configura el origen de datos*/
$.ajax({
type: 'POST',
url: "autocomplete.php?functionToCall=BuscarLugar",
data: {textoBuscar: String(request.term)},
dataType: "json",
async: false,
success: function (result) {
response(result);
}
});
},
search: function () {
/*Este evento sucede mientras se escribe algo en el objeto txtBuscar*/
// Condicionar a menos 3
// caracteres en la búsqueda
var term = this.value;
if (term.length < 3) {
return false;
}
},
focus: function () {
/*Este evento sucede cuando el objeto txtBuscar obtiene el foco*/
// Evitar que el valor se inserte cuando
// el TextBox obtenga el foco
return false;
},
select: function (event, ui) {
/*Este evento sucede cuando se selecciona uno de los resultados*/
// Asignar el valor al objeto txtBuscar
this.value = ui.item.value;
// Mostrar el ID en el objeto txtValor
$("#txtValor").val(ui.item.id);
return false;
}
});
</script>
</body>
Lo primero que haremos será agregar unas instrucciones que nos ayudarán en caso de que cometamos algún error. Agregamos las siguientes líneas:
error_reporting(E_ALL & ~E_DEPRECATED);
ini_set("display_errors", "1");
Muy bien. En todos mis tutoriales, trato de utilizar clases; este ejercicio no es la excepción. La función "autocomplete" de jQuery requiere que existan dos datos en el resultado JSON. Estos datos deben estar identificados con una propiedad id y value. Con la finalidad de crear un JSON bien estructurado, agregamos una clase llamada "JsonResult", la cual tendrá las dos propiedades necesarias. El código de la clase es el siguiente:
class JsonResult {
public $id;
public $value;
}
function BuscarLugar($textoBuscar) {
$result = array();
$cnn = new mysqli("127.0.0.1", "root", "P@ssword", "ejemplos");
/* verificar la conexión */
if (mysqli_connect_errno()) {
printf("Conexión fallida: %s\n", mysqli_connect_error());
exit();
}
$query = $cnn->stmt_init();
$query = $cnn->prepare("select id_ubicacion, nombre from ubicaciones where nombre like concat('%', ?,'%')");
$query->bind_param("s", $textoBuscar);
$query->execute();
$id_ubicacion = 0;
$nombre = "";
$query->bind_result($id_ubicacion, $nombre);
while ($query->fetch()) {
$json_item = new JsonResult();
$json_item->id = $id_ubicacion;
$json_item->value = $nombre;
array_push($result, $json_item);
}
/* cerrar la conexión */
$query->close();
$cnn->close();
//Generar Json
echo json_encode($result);
}
if (isset($_GET["functionToCall"]) && !empty($_GET["functionToCall"])) {
switch ($_GET["functionToCall"]) {
case "BuscarLugar":
if ($_POST) {
BuscarLugar($_POST["textoBuscar"]);
}
break;
}
}
Si escribimos al menos tres caracteres, se nos mostrarán los resultados encontrados:
Si seleccionamos uno de los resultados su value se establece en el objeto "txtBuscar" y su id en "txtValor":
No hay comentarios:
Publicar un comentario