Voy a mostrar la forma de como autocompletar en una caja de texto, lo vamos a hacer utilizando el widget Autocomplete de jQueryUI, PHP para el c\u00f3digo a ejecutarse en el servidor y MySQL como gestor de base de datos.<\/p>\n
El ejemplo consiste en lo siguiente: Tendremos un formulario HTML en el cual el usuario captura una matricula(con autocompletar), una vez capturada la matricula la informaci\u00f3n del alumno se rellenar\u00e1 autom\u00e1ticamente.<\/p>\n
El formulario tendr\u00e1 4 campos: matricula, nombre, paterno y materno.<\/span><\/p>\n Lo primero que tenemos que hacer es incluir la libreria jQuery<\/a> y jQueryUI<\/a> , las podemos descargar y enlazar de forma local o lo podemos hacer desde google. Tambien es necesario incluir el css del tema jQueryUI<\/a> que se desea utilizar. Todo esto lo ponemos dentro de la etiqueta <head><\/p>\n Posteriormente colocamos la declaraci\u00f3n $(document).ready y agregamos el siguiente c\u00f3digo.<\/p>\n En la primer parte agregamos al cuadro de texto matricula el widget autocomplet de jQuery UI y configuramos sus opciones:<\/p>\n La segunda parte consiste en solicitar al servidor los datos cuando la caja de texto matricula pierda el foco, una vez que esto pasa se hace una petici\u00f3n ajax que devolver\u00e1 la informaci\u00f3n del alumno, los datos los va a devolver como json.<\/p>\n En el servidor vamos a tener 2 archivos PHP, el primero llamado buscaralumno.php que va a devolver la lista de matriculas y el segundo, alumno.php devolver\u00e1 la informacion de un alumno en particular.<\/p>\n buscaralumno.php<\/strong><\/p>\n Lo que hacemos es este archivo es almacenar en la variable matricula el dato que se va a buscar, dicho valor se obtiene de la variable global $_GET con el nombre term, posteriormente se crea una conexi\u00f3n a la base de datos y se ejecuta la consulta que devolver\u00e1 la lista de matriculas, las cuales se almacenan en un arreglo llamado matriculas, al final ese arreglo se pasa a json y se imprime para que regrese la respuesta.<\/p>\n alumno.php<\/strong> Eso es todo en el ejercicio del dia de hoy, si les fue de ayuda dejen sus comentarios, recomienden el blog y sigan practicando. Aqui les dejo el link de descarga.<\/p>\n","protected":false},"excerpt":{"rendered":" Voy a mostrar la forma de como autocompletar en una caja de texto, lo vamos a hacer utilizando el widget Autocomplete de jQueryUI, PHP para el c\u00f3digo a ejecutarse en…<\/p>\n","protected":false},"author":1,"featured_media":449,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-77","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php"],"_links":{"self":[{"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/posts\/77","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/comments?post=77"}],"version-history":[{"count":0,"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/posts\/77\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/media\/449"}],"wp:attachment":[{"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/media?parent=77"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/categories?post=77"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/tags?post=77"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<form>\r\n <label for=\"matricula\">Matricula:<\/label>\r\n <input type=\"text\" id=\"matricula\" name=\"matricula\" value=\"\"\/> <br\/>\r\n <label for=\"nombre\">Nombre:<\/label>\r\n <input type=\"text\" id=\"nombre\" name=\"nombre\" value=\"\"\/> <br\/>\r\n <label for=\"paterno\">Paterno:<\/label>\r\n <input type=\"text\" id=\"paterno\" name=\"paterno\" value=\"\"\/> <br\/>\r\n <label for=\"materno\">Materno:<\/label>\r\n <input type=\"text\" id=\"materno\" name=\"materno\" value=\"\"\/>\r\n<\/form>\r\n\r\n<\/pre>\n
jQuery<\/h3>\n
<script type=\"text\/javascript\" src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.0.0\/jquery.min.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.10.2\/jquery-ui.min.js\"><\/script>\r\n<link href=\"css\/jqueryui.css\" type=\"text\/css\" rel=\"stylesheet\"\/>\r\n<\/pre>\n
$(document).ready(function(){\r\n $( \"#matricula\" ).autocomplete({\r\n \tsource: \"buscaralumno.php\",\r\n \tminLength: 2\r\n });\r\n\r\n $(\"#matricula\").focusout(function(){\r\n \t$.ajax({\r\n \t url:'alumno.php',\r\n \t type:'POST',\r\n \t dataType:'json',\r\n \t data:{ matricula:$('#matricula').val()}\r\n \t}).done(function(respuesta){\r\n \t $(\"#nombre\").val(respuesta.nombre);\r\n \t $(\"#paterno\").val(respuesta.paterno);\r\n \t $(\"#materno\").val(respuesta.materno);\r\n \t});\r\n });\r\n});\r\n<\/pre>\n\n
PHP<\/h3>\n
$matricula = $_GET['term'];\r\n\r\n$conexion = new mysqli('servidor','usuario','password','basedatos',3306);\r\n\r\n$consulta = \"SELECT matricula FROM tblalumno WHERE matricula LIKE '%$matricula%'\";\r\n\r\n$result = $conexion->query($consulta);\r\n\r\nif($result->num_rows > 0){\r\n while($fila = $result->fetch_array()){\r\n $matriculas[] = $fila['matricula'];\r\n }\r\necho json_encode($matriculas);\r\n}\r\n\r\n<\/pre>\n
\nEn el archivo alumno.php tenemos el codigo que va a devolver la informaci\u00f3n del alumno en base a la matricula seleccionada, dicha matricula la recibimos mediante la variable global $_POST, se crea la conexi\u00f3n a la base de datos y se ejecuta la consulta. Posteriormente se agrega a la variable respuesta los datos del alumno y se imprime como json.<\/p>\n$matricula = $_POST['matricula'];\r\n$conexion = new mysqli('servidor','usuario','password','basedatos',3306);\r\n$consulta = \"SELECT nombre,paterno,materno FROM tblalumno WHERE matricula = '$matricula'\";\r\n$result = $conexion->query($consulta);\r\n\r\n$respuesta = new stdClass();\r\nif($result->num_rows > 0){\r\n $fila = $result->fetch_array();\r\n $respuesta->nombre = $fila['nombre'];\r\n $respuesta->paterno = $fila['paterno'];\r\n $respuesta->materno = $fila['materno'];\r\n}\r\necho json_encode($respuesta);\r\n\r\n<\/pre>\n