Autorrelleno de campos con JavaScript

A veces, cuando en un campo de búsqueda introducimos un nombre, nos es útil que este se autorrellene con el más parecido que exista dentro de los posibles valores.

No sé si ya existirá algo parecido por la red pero yo me fabriqué este Script para mi propio uso.

Este es un ejemplo:

(Para que funcione correctamente debes agregar este sitio a los sitios de confianza, Herramientas -> Opciones de Internet ... -> pestaña "Seguridad" -> Clic en "Sitios de confianza" y agregar esta dirección http://elmaestroweb.blogspot.com)

Introducir nombre a buscar

Aquí tienes el código usado:

<SCRIPT LANGUAGE="JavaScript"> // // para capturar teclas corrientes // sobre el campo que se ha de autorrellenar // function ObservaYBusca(oCampo,url) { var ieKey=event.keyCode; // tecla pulsada var sTexto1=oCampo.value.toString(); // texto introducido var sTexto2=sTexto1.substr(0,nPos); // texto hasta el cursor var iFin; // captamos ESC if (ieKey==27){ location.href=url; } // largo del texto // // asignamos la tela pulsada sTexto2=sTexto2+String.fromCharCode(ieKey); // aumentamos la posicion del cursor nPos ++; // // buscamos coincidencia en la listao coincidencias BuscaEnLaLista(sTexto2,oCampo); //iFin=oCampo.value.length; } // // para buscar coincidencias // function BuscaEnLaLista(sTexto,oCampo){ var iPosicion = BuscarElemento(aListaAutorreleno, sTexto); // posición en la lista // // si existe if (iPosicion >=0) { // lo rellenamos oCampo.value=aListaAutorreleno[iPosicion]; event.returnValue = false; // y ponemos el cursor PoneCursor(nPos,oCampo); } // no existe else { // asignamos lo introducido oCampo.value=sTexto; // y ponemos el cursor PoneCursor(nPos,oCampo); event.returnValue = false; } } // // busca en la lista las coincidencias // function BuscarElemento(aElementos, sCadena){ var i; // contador var iPosicion; // posicion dentro de la lista var iLargo=sCadena.length; // tamaño de la cadena introducida // // recorremos la lista for(i=0; i<aElementos.length; i++) { if (aElementos[i].substr(0,iLargo) == sCadena) // si lo ha encontrado break; } // asignamos la posición (-1 no encontrado) iPosicion = (i < aElementos.length)? i : -1; // devolvemos la posición return (iPosicion); } // // Pone el cursor en un punto determinado // function PoneCursor(nPos,oCampo){ var sCadena=oCampo.value.toString(); // cadena con el valor del campo var iComienzo=0; // inicio var iFin=sCadena.length; // final var sPrincipio=sCadena.slice(iComienzo,nPos); // cadena desde inicio a la posición del cursor var sFinal=sCadena.slice(nPos,iFin); // cadena desde el cursor hasta el final oCampo.focus(); // damos el foco oCampo.value=sPrincipio; // recortamos oCampo.select(); // seleccionamos document.execCommand('copy'); // ejecutamos un "copy" (copiar) oCampo.value=sFinal; // asignamos el final oCampo.focus(); // volvemos a dar el foco document.execCommand('paste'); // ejecutamos un "paste" (pegar) sobre el campo } </SCRIPT> <CENTER> <FORM name="miForm" METHOD=POST ACTION=""> <!-- en el INPUT del campo a "autorrellenar": onkeypress="ObservaYBusca(this,urlsiESCAPE)" onfocus="oFoco=this" --> <P>Introducir nombre a buscar <INPUT TYPE="TEXT" NAME="abuscar" onkeypress="ObservaYBusca(this,'http://www.google.es')" onfocus="oFoco=this"></P> <P><TEXTAREA NAME="lista" ROWS="7" COLS="30" DISABLED>

El codigo está comentado por lo que no necesita prácticamente explicación. En el onkeypress del campo de autorrelleno llamamos a la función ObservaYBusca con dos parametros, el campo en si mismo y una URL donde queremos que se dirija al hacer ENTER.

ObservaYBusca capta la tecla pulsada y busca en el array de nombres las posibles coincidencias y hace que estas se vayan mostrando.

Espero que a alguien le sirva.