Input con autocompletado

0
245

¿Has pensado en ponerle autocompletado a los input de tu web? Sinceramente es más fácil de implementar de lo que piensas, aunque es difícil encontrar un código simplificado para comprenderlo.

Aprovechando el código que utilicé para los select con buscador,  voy a hacer un input (caja de texto) con autocompletado de las provincias de España. Son bastante similares así que no lo explicaré. Este código me lo guardo por aquí ya que es el que utilizo frecuentemente. Me costó muchísimo simplificarlo y la verdad es que me gustaría compartirlo.

En otros tutoriales seguramente pondré ejemplos utilizando este código, incluso obteniendo datos desde BBDD.

caja de texto con autocompletado
caja de texto con autocompletado



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

<h1>Input text con autocompletar - 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>

<!-- Necesario para que funcione-->

       

<input type="text" id="Concepto" onblur="comprobar()" name="Concepto" >

<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']

      $( "#Concepto" ).autocomplete({
        source: Provincia
      });
    
     });

</script>

 

Dejar respuesta

Please enter your comment!
Please enter your name here