Zelect
Los selects o dropdowns siempre han sido unos elementos HTML difíciles de personalizar.
En este artículo vamos a ver una forma simple de hacerlo utilizando el plugin jQuery Zelect.
La principal operación del plugin es convertir las opciones del select en una lista ordenada para poder personalizarlo con más facilidad y con las misma funcionalidad: seleccionar un elemento del listado. Es interesante también porque incorpora un buscador que tras escribir en el campo de texto te busca en linea los registros coincidentes.
Es un plugin muy liviano y fácil de añadir a tus páginas Web. Tan solo deberás añadirlo en la cabecera de tu página:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="./zelect.js"></script>
<script type="text/javascript">
$(setup)
function setup() {
$('#id_country').zelect({ placeholder:'Selecciona país...' })
}
</script>
Y en el <body>, dentro de un formulario añadir tu select html, como por ejemplo:
<select name="id_country" id="id_country"> <option value="231">Afganistán</option> <option value="230">Albania</option> <option value="1">Alemania</option> ... </select>
Ahora podríamos darle un poco de estilo añadiendo lo siguiente a tu hoja de estilos:
.zelect {
display: inline-block;
background-color: white;
min-width: 300px;
cursor: pointer;
line-height: 36px;
border: 1px solid #dbdece;
border-radius: 6px;
position: relative;
}
.zelected {
font-weight: bold;
padding-left: 10px;
}
.zelected.placeholder {
color: #999f82;
}
.zelected:hover {
border-color: #c0c4ab;
box-shadow: inset 0px 5px 8px -6px #dbdece;
}
.zelect.open {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.dropdown {
background-color: white;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border: 1px solid #dbdece;
border-top: none;
position: absolute;
left:-1px;
right:-1px;
top: 36px;
z-index: 2;
padding: 3px 5px 3px 3px;
}
.dropdown input {
font-family: sans-serif;
outline: none;
font-size: 14px;
border-radius: 4px;
border: 1px solid #dbdece;
box-sizing: border-box;
width: 96%;
padding: 7px 0 7px 10px;
}
.dropdown ol {
padding: 0;
margin: 3px 0 0 0;
list-style-type: none;
max-height: 150px;
overflow-y: scroll;
}
.dropdown li {
padding-left: 10px;
}
.dropdown li.current {
background-color: #e9ebe1;
}
.dropdown .no-results {
margin-left: 10px;
}
Obteniendo como resultado:
Autor
¿Buscas trabajo de programador?
4 respuestas a “Zelect”
Deja una respuesta
26 artículos que te podrían interesar
Ver más sobre
Hola buen dia!!
me podrian dar un ejemplo pero usando ajax porfavor?
e tratado de hacerlo por mi cuenta pero no lo e podido hacer 🙁 .
desde ya Gracias!!
Hola, Para que quieres usar ajax? a que te refieres? a las sugerencias?
Hola Jose, estoy buscando alguna rutina que me permita, por un lado cargar en un select, de forma asíncrona una gran cantidad de items desde una BD (más de 30.000) y por otro lado utilizar algo parecido a ZELECT para gestionar la selección del select una vez cargado.
¿Puedes darme alguna idea?
Gracias,
Antonio
Si que se puede hacer, lo único que te hace falta es realizar la consulta o query que te retorne de la base de datos los 30.000 registros y en un bucle añadirlos en los options del select:
Para interactuar con una base de datos observar el siguiente tutorial: http://www.jose-aguilar.com/blog/interactuar-con-una-base-de-datos-utilizando-mysqli/
Saludos