Bienvenid@s, hoy os mostraré un ejemplo bastante didáctico para que podáis implementar vuestro propios campos autocomplete con Jquery y CSS3, este tipo de campos pueden ser múy útiles para agregar referencias de búsqueda y así facilitar la interacción con el cliente o visitante web.
Esta función la podría realizar un input text y que el visitante incluya sus parámetros de búsqueda, pero en determinados casos, por ejemplo en una tienda de ropa online, lo lógico es que le ofrezcas una serie de referencias de lo que puede encontrar en la web, calzado, ropa interior, deportiva, vestidos, trajes, ropa para niños, vaqueros, etc ..., en eso precisamente consiste integrar un campo de búsqueda autocomplete, en facilitar la búsqueda a tu cliente.
El código de ejemplo viene comentado en cada acción que se realiza y lógicamente lo puedes modificar, mejorarlo o adaptarlo a lo que necesites.
A continuación puedes ver una demo de un campo autocomplete que te ofrecerá como referencia ciertos productos de una tienda online ...
Código del ejemplo ...
<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Como crear un campo autocomplete con Jquery y CSS3</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
/*Incluyendo el input text y el icono*/
$(".autocomplete-group li.search-box").html("<input type='text' placeholder='Search'><div class='icon-search'></div>");
/*Almacenar en un array cada uno de los elementos*/
elementos = new Array();
for (x=0; x<$(".autocomplete-group li").size(); x++)
{
elementos[x] = $(".autocomplete-group li:eq("+x+")").text();
}
/*Capturar el evento mouseover*/
$(".autocomplete-group").mouseover(function()
{
/*Capturar el evento al escribir en el input text*/
$(".autocomplete-group li input").bind("keypress", function(){
/*Recorrer todos los elementos del array*/
$.grep(elementos, function(value, index){
/*Obtener el valor del elemento li para realizar la búsqueda*/
string = value;
/*Transformar en minúsculas*/
string = string.toLowerCase();
/*Primer parámetro de búsqueda las dos primeras letras*/
val1 = $(".autocomplete-group li input").val().substr(0, 2);
/*Transformar en minúsculas*/
val1 = val1.toLowerCase();
/*Segundo parámetro de búsqueda la penúltima y antepenúltima letra*/
val2 = $(".autocomplete-group li input").val();
/*Transformar en minúsculas*/
val2 = val2.toLowerCase();
if (val1.match(string.substr(0, 2)) || val2.match(string.substr(string.length -3, 2)))
{
$(".autocomplete-group li:eq("+index+")").css({display: "block"});
}
else
{
/*Ocultar*/
$(".autocomplete-group li:eq("+index+")").css({display: "none"});
}
});
});
});
/*Al hacer click sobre alguno de los resultados
enviar el valor al input text y ocultar los resultados "li"
salvo el "li" donde se encuentra el input text */
$(".autocomplete-group li").click(function(){
if (!$(this).hasClass("search-box"))
{
$(".autocomplete-group li input").val($(this).text()).blur();
$(".autocomplete-group li").css({display: "none"});
$(".autocomplete-group li:first-child").css({display: "block"});
}
});
});
</script>
<style>
#autocomplete{width: 250px;}
.autocomplete-group
{
position: absolute;
}
/*Aplicar los estilos de la lista de resultados*/
.autocomplete-group li
{
display: none;
list-style: none;
border-left: 1px solid #DBE1EB;
border-right: 1px solid #DBE1EB;
border-bottom: 1px solid #DBE1EB;
font-size: 16px;
font-family: Arial, Verdana;
padding-left: 7px;
padding-right: 7px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
background: #454F6F;
background: linear-gradient(top, #454F6F, #5D6684);
background: -moz-linear-gradient(top, #454F6F, #5D6684);
background: -webkit-linear-gradient(top, #454F6F, #5D6684);
background: -o-linear-gradient(top, #454F6F, #5D6684);
color: #FFFFFF;
}
/*Aplicar estilos del input text*/
.search-box input
{
border: 0;
width: 80%;
background: transparent;
font-size: 16px;
}
/*Aplicar estilos del li que contiene el input text*/
.autocomplete-group li.search-box
{
background: #FFFFFF;
border: 1px solid #DBE1EB;
color: #8A92AA;
display: block;
}
/*Aplicar estilos del li que contiene el input text al capturar el evento focus*/
.autocomplete-group li.search-box:focus
{
background: #FFFFFF;
color: #8A92AA;
border: 1px solid yellow;
}
/*Aplicar los estilos de la lista de resultados al capturar el evento mouseover*/
.autocomplete-group li:hover
{
cursor: pointer;
background: #8A92AA;
background: linear-gradient(top, #8A92AA, #A1A7BC);
background: -moz-linear-gradient(top, #8A92AA, #A1A7BC);
background: -webkit-linear-gradient(top, #8A92AA, #A1A7BC);
background: -o-linear-gradient(top, #8A92AA, #A1A7BC);
}
/*Aplicar estilos del icono de búsqueda*/
.icon-search
{
float: right;
width: 18px;
height: 18px;
background-image: url(search.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<!--AUTOCOMPLETE-->
<div id="autocomplete">
<ul class="autocomplete-group">
<li class="search-box"></li>
<li>Calzado mujer</li>
<li>Calzado hombre</li>
<li>Calzado niños</li>
<li>Calzado niñas</li>
<li>Ropa femenina</li>
<li>Ropa masculina</li>
<li>Vestidos</li>
<li>Trajes</li>
<li>Ropa deportiva</li>
<li>Ropa niños</li>
<li>Ropa niñas</li>
<li>Complementos</li>
</ul>
</div>
<!--AUTOCOMPLETE-->
</td>
<td>
<strong>Parámetros de búsqueda: </strong>
<ul>
<li>Calzado mujer</li>
<li>Calzado hombre</li>
<li>Calzado niños</li>
<li>Calzado niñas</li>
<li>Ropa femenina</li>
<li>Ropa masculina</li>
<li>Vestidos</li>
<li>Trajes</li>
<li>Ropa deportiva</li>
<li>Ropa niños</li>
<li>Ropa niñas</li>
<li>Complementos</li>
<ul>
</td>
</tr>
</table>
</body>
</html>
No hay comentarios:
Publicar un comentario