Select con buscador

0
521

¿Te gustaría tener en tu web un select con buscador? Has venido al lugar apropiado! te voy a explicar con un ejemplo muy sencillo como hacerlo y a partir de ahora deja de usar select con miles de opciones. ¿Sabías que es una autentica chapuza eso no?

Estoy harto de perder segundos de mi vida por culpa de gente que no los pone en su web. Deberíais hacerlo pero ya!! venga que no te entretengo más, al lío!

Para un select con buscador no se necesita mucho, salvo buscar por internet hasta la saciedad. El ejemplo que he puesto es un select con todas las provincias de España, hay que decir que tira de una librería externa pero para mí este es el más fácil de implementar.

select con buscador
select con buscador

Para entender el código:

Si te fijas en el siguiente código llamo a la librería select2 (Gracias a esta librería funciona el select con buscador). También he puesto jquery y me he traído css de bootstrap. También tuve que declarar la codificación UTF-8 porque tenía problemas con los acentos.

<!-- Necesario para que funcione-->
<meta charset="UTF-8">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />  
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<!-- Necesario para que funcione-->

Esta parte del código no tiene mucho que explicar salvo que es donde se van a insertar todas las opciones, habrás podido observar que es un select sin opciones. Lo más importante quizás es la id “Provincia” que a través de ella nos ayudará a insertar todas las opciones.

<select id="Provincia" name="Provincia" style="width:300px;">
  <option selected="selected" disabled>Seleccionar Provincia</option>
</select>

Es este el código que finalmente nos ayudará a realizar todo. Intentaré explicarlo de la mejor manera:
De arriba hacia abajo vemos que esta dentro de $(document).ready(function() { } quiere decir que la función se ejecutará cuando el documento este completamente cargado.

Lo siguiente que observamos es un array que contiene todas las provincias de España, esto no tiene mucho más misterio.

Finalmente vemos que a la id #Provincia se le pasa una propiedad llamada select2 donde a data: se le asignará el Array creado anteriormente con todas las provincias. Quizás esto sea lo más difícil de comprender, pero no quita con que no puedas utilizarlos para tus futuros proyectos.

 

<script type="text/javascript">
    $(document).ready(function() {
     var Provincia = ['Álava','Albacete','Alicante/Alacant','Almería','Asturias','Ávila','Badajoz','Barcelona','Burgos','Cáceres','Cádiz','Cantabria','Castellón/Castelló','Ceuta','Ciudad Real','Córdoba','Cuenca','Girona','Las Palmas','Granada','Guadalajara','Guipúzcoa','Huelva','Huesca','Illes Balears','Jaén','A Coruña','La Rioja','León','Lleida','Lugo','Madrid','Málaga','Melilla','Murcia','Navarra','Ourense','Palencia','Pontevedra','Salamanca','Segovia','Sevilla','Soria','Tarragona','Santa Cruz de Tenerife','Teruel','Toledo','Valencia/Valéncia','Valladolid','Vizcaya','Zamora','Zaragoza']

      $("#Provincia").select2({
       data: Provincia

       });

     });
</script>

 

El código completo estaría aquí. Para verlo funcionar pulsa aquí

<h1>Seleccionar Provincia con buscador - QuecosasLeo</h1>

<!-- Necesario para que funcione-->
<meta charset="UTF-8">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />  
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<!-- Necesario para que funcione-->

       

  <select id="Provincia" name="Provincia" style="width:300px;">
    <option selected="selected" disabled>Seleccionar Provincia</option>
  </select>

<script type="text/javascript">
    $(document).ready(function() {
     var Provincia = ['Álava','Albacete','Alicante/Alacant','Almería','Asturias','Ávila','Badajoz','Barcelona','Burgos','Cáceres','Cádiz','Cantabria','Castellón/Castelló','Ceuta','Ciudad Real','Córdoba','Cuenca','Girona','Las Palmas','Granada','Guadalajara','Guipúzcoa','Huelva','Huesca','Illes Balears','Jaén','A Coruña','La Rioja','León','Lleida','Lugo','Madrid','Málaga','Melilla','Murcia','Navarra','Ourense','Palencia','Pontevedra','Salamanca','Segovia','Sevilla','Soria','Tarragona','Santa Cruz de Tenerife','Teruel','Toledo','Valencia/Valéncia','Valladolid','Vizcaya','Zamora','Zaragoza']

      $("#Provincia").select2({
       data: Provincia

       });

     });
</script>

 

Dejar respuesta

Please enter your comment!
Please enter your name here