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 respuestas
La respuesta de Víctor es perfecta, pero en caso de que no quieras usar la librería de jQuery UI tienes varias opciones:
- http://loopj.com/jquery-tokeninput/
- https://www.devbridge.com/sourcery/components/jquery-autocomplete/
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).
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.