Implementar autocompletado de textos con jQuery

 in Javascript by

El autocompletado de texto en input text es algo muy util a la hora de rellenar formatos o formularios, se trata de seleccionar entre un grupo de opciones sugeridas según las letras tecleadas.

Muy similar a lo que pasa en Google cuando estamos buscando algo, tecleamos una busqueda y google nos sugiere opciones de autocompletado basada en bsuquedas anteriores.

Así con jquery podemos crear la sensación de sugerencias, para ello se usa la función autocomplete, que lleva como parámetros un array o lista de palabras/frases con las cuales se mostrara las opciones de acuerdo a lo que este escribiendo el usuario.

Descargar Jquery y Jquery UI

Vamos a necesitar las librerias jQuery y jQuery UI, de jquery ya hemos hablado muchas veces

JQuery UI es una libreria que extiende las funcionalidades de jquery tantas funcionalidades que quizas les platique en otro post, de hecho hace tiempo hice un post sobre drag and drop precisamente usando jquery ui.

La funcion de autocompletar esta en JQuery UI.

Descargar jQuery: https://jquery.com/

Descargar jQuery UI: https://jqueryui.com/

Jquery UI es un conjunto de archivos, normalmente un archivo JS, un archivo CSS y un set de imágenes.

Descargamos todo y guardamos en una carpeta para nuestro proyecto y empezamos a codificar.

Código

Ahora vamos a crear un archivo index.html normal y vamos a agregar en el <head></head> Las rutas de las librerias jquery y jquery ui.

<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui/jquery-ui.min.css">

Ahora ya en la etiqueta body vamos a crear un input text por que todo depende de que el usuario valla escribiendo y se mostraran las sugerencias.

Agregamos un label, un input text y un submit, aunque lo mas importante es el input text, recordar agregarle un ID por que lo vamos a usar mas adelante.

<div>
<label>Buscar:</label>
<input type="text" id="prueba" placeholder="Que estas buscando ...">
<input type="submit" value="Buscar">
</div>

Ahora solo basta invocar la funcion Jquery autocomplete, pero tambien vamos a crear un array con la lista de sugerencias.

 <script>
  $( function() {
    var opciones_array = [
      "Como aprender a programar",
      "Como aprender a cocinar",
      "Como aprender a manejar",
      "Como aprender ingles",
      "Como aprender mecanica cuantica",
      "Como aprender a aprender",
    ];
    $( "#prueba" ).autocomplete({ source: opciones_array });

  } );
  </script>

La variable tipo array opciones_array con tiene todas las posibles sugerencias, podemos agregar tantas opciones como sea necesario, incluso mas adelante veremos como cargar las opciones desde una base de datos.

Recordamos que para llamar la función autocomplete necesitaremos el ID del input text y en el parámetro source debe ir el nombre de la variable con la lista de opciones.

Resultado

En la siguiente imagen se puede ver el resultado de el input text y las opciones que se van mostrando, estas son dinámicas y aparecen y desaparecen cuando cambia el texto.

Leave a comment