En ocasión tenemos mucha data que cargar en un select que nos inclinamos por usar un autocompletar y de hecho podemos encontrar varios pero no siempre se amoldan a nuestras necesidades y modificarlos puede llegar a dar dolor de cabeza.
Para los reacios que no quieren ver las ventajas aquí les dejo unas.
- Velocidad para mejorar tu SEO
- Facilidad de Búsqueda UX
- Diseño más atractivo de UI
A continuación voy hacer un ejemplo paso a paso de cómo se crea uno en jquery y php.
aqui el html con lineas comentadas explicando
<!DOCTYPE html>
<html>
<head>
<title>atocompletar</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!--formulario del autocompletar-->
<form method="post">
<!--aqui escribimos el nombre de departamento y activa el autocompletar-->
<input type="text" name="departamentos" id="departamentos" />
<!--aqui va el codigo del departamento cuando selecciona-->
<input type="hidden" name="codigo_departamentos" id="codigo_departamentos" />
</form>
<!--agregamos jquery-->
<script src="js/jquery.js" type="text/javascript"></script>
<!--agregamos nuestro script de autocompletar-->
<script src="js/autocompletar.js" type="text/javascript"></script>
</body>
</html> |
un php que debe mandar un json con la data real pero aqui puse un dato en duro pero en javascript hago que envie un dato en get para que sirva para filtrar una consulta sql que eso seria en casos reales.
solo por demo coloco un json en duro.
$data=array(array("codigo"=>"001","provincia"=>"LIMA"), array("codigo"=>"002","provincia"=>"AYACUCHO"), array("codigo"=>"003","provincia"=>"JUNIN"), array("codigo"=>"004","provincia"=>"PUNO"), array("codigo"=>"005","provincia"=>"TRUJILLO"), array("codigo"=>"006","provincia"=>"IQUITOS"), array("codigo"=>"007","provincia"=>"LORETO") ); echo json_encode($data); |
las siguientes lineas son la base de todo y cada linea tiene explicacion
//cuando tecle en el input se ejecutara $("#departamentos").on("keyup",function(){ //la referencia al input lo metemos en una variable var $this=$(this); //eliminamos el div si existiera $("#autocompletar").remove(); //solo si es mayor a 3 envia un ajax if ($("#departamentos").val().length >=3) { //para hacer bonito el efecto agregamos un gif de load en la parte derecha del input //sera un background $this.css({"background":"url('chrome-extension://hlngmmdolgbdnnimbmblfhhndibdipaf/images/loader.gif') top right no-repeat"}) //capturamos el valor de ingreso en el campo var departamentos=$this.val(); //hacemos un ajax en get y enviamos un variable get que es el dato que ingreso en el input $.get("data.php",{"departamentos":departamentos},function(data){ //ahora crearemos un div para mostrar los resultados pero queremos que sea debajo del input //y para eso debemos obtener la posicion del elemento para eso position de jquery posicion=$this.position(); //guardamos el top , left y width // //el top actual + el alto de la cajita para posicionarlo debajo de la cajita me refiero al input //adicionalmente 10 px mas para que no sea tan pegado var top=parseInt(posicion.top)+parseInt($this.height())+10; //el left del la cajita var left=posicion.left; //el ancho de la cajita + 100 px var width=parseInt($this.width())+100 //debemos crear el div pero consultamos si existe para no volver a crearlo if (!$("#autocompletar").length) { //en caso no exista lo creamos dando las medidas $("body").append("<div id='autocompletar' style='overflow:auto;top:"+top+"px;left:"+left+"px;width:"+width+"px; height:100px;position:absolute; border:1px solid #ebebeb'></div>") } var html=''; //ahora creamos el contenido que va dentro del div sera un ul con la respuesta html +='<ul id="lista">'; data=$.parseJSON(data); //un recorrido a la respuesta que nos envio el ajax que en este caso se llama data $.each(data, function(i, item) { //creamos un li por cada vuelta y con atributos en el li que //nos serviran para que cuando seleccione guardarlos de alguna forma html +='<li data-codigo="'+item.codigo+'" data-provincia="'+item.provincia+'"><a href="javascript:;">'+item.provincia+'</a></li>'; }); html +='</ul>'; //cancelamos el efecto del load del gif $this.css({"background":""}) //limpiamos todo lo que pueda tener el div contenedor y agregamos toda nuestra ul que tiene //la data obtenida como respuesta del ajax $("#autocompletar").empty().append(html) }); } }) |
ahora la funcion que se ejecuta al selecciona un item de la respuesta.
//funcion que se ejecuta cuando hace click en una opcion de la respuesta al escribir $(document).on("click","li",function(){ //aqui tenemos los atributos que creamos en el li //jalamos el codigo y el texto del nombre de la provincia codigo=$(this).attr("data-codigo"); provincia=$(this).attr("data-provincia"); //asignamos los valores $("#codigo_departamentos").val(codigo) $("#departamentos").val(provincia) //y finalmente eliminamos el elementos del autocompletar $("#autocompletar").remove(); }) |
puede ver en funcionamiento el script
autocompletar jquery demo
y descargarlo aqui
autocompletar jquery