Autocompletar un campo con JavaScript.

Es decir, si quisiese escribir una provincia, si escribiese la M, que me saliese todas las provincias que empiecen por M en una lista desplegable debajo del input text

2

2 respuestas

Respuesta
3

La respuesta de Víctor es perfecta, pero en caso de que no quieras usar la librería de jQuery UI tienes varias opciones:

Incluso si no quieres depender de jQuery puedes trabajar con javascript puro y duro con librerías como https://github.com/Fischer-L/autoComplt  (muy simple, pero te puede valer).

Respuesta
2

Existen múltiples plugins jQuery que permiten dar la funcionalidad de autocompletar a un input.

El más simple que conozco (y más extendido a la hora de buscar documentación) es el autocomplete de jQueryUI: https://jqueryui.com/autocomplete/

Tan solo has de referenciar a la librería de jQuery y jQueryUI, indicar el origen de datos (puede estar hardcoded en tu javascript o obtenerlo de una llamada ajax) e indicar cual es el input que debe mostrar los datos.

Un ejemplo:

Código HTML:

<input id="autocomplete" type="text" placeholder="Provincias">

Código JS:

var provincias = ["a coruna","alava","albacete","alicante","almeria","asturias","avila","badajoz","baleares","barcelona","burgos","caceres","cadiz","cantabria","castellon","ceuta","ciudad real","cordoba","cuenca","girona","granada","guadalajara","guipuzcoa","huelva","huesca","jaen","la rioja","las palmas","leon","lleida","lugo","madrid","malaga","melilla","murcia","navarra","ourense","palencia","pontevedra","salamanca","tenerife","segovia","sevilla","soria","tarragona","teruel","toledo","valencia","valladolid","vizcaya","zamora","zaragoza"];
 $("#autocomplete").autocomplete({
      source: provincias
    });

Como ves es muy sencillo. En la web de jQueryUI tienes mucha más documentación para conocer las distintas opciones de este plugin.

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas