Script en Javascript para posicionarse mediante la pulsación de teclas del teclado dentro de los elementos de un campo select de formulario.
Este artículo lo hemos marcado como obsoleto porque actualmente no es necesario hacer ningún tipo de script para conseguir este comportamiento en un select. Siempre que pones el foco en un select y se abren las opciones el teclado te sirve para posicionarte en los elementos. Por tanto no necesitas Javascript para conseguir este comportamiento.
Se trata de un script para posicionarse en un elemento de un select, es decir, para conseguir que, pulsando unas teclas del teclado que podrían corresponder con las primeras letras de un elemento del select, el elemento seleccionado de dicho select sea aquel que corresponda con las letras pulsadas.
Es una descripción un poco larga, pero en realidad el efecto es sencillo. En los select de las páginas web, al pulsar una tecla, el select se mueve al primer elemento que tiene como inicial esa tecla. Sin embargo, si hay muchos elementos en el select, el usuario puede encontrar que esa ayuda se queda un poco corta, ya que tendría que, luego de pulsar la inicial del elemento buscado, repasar todos los elementos que comienzan por esa letra hasta encontrar el que busca. El presente ejemplo mejora esa función de búsqueda en los select, ya que permite realizar la pulsación de varias teclas seguidas y va mostrando aquel elemento que comienza por todas las letras que se han pulsado (una detrás de otra) hasta que se apreta la tecla Enter, momento en el cual se supone que hemos encontrado el elemento adecuado y queremos continuar con el rellenado de otros campos del formulario.
En este ejemplo se ha creado un select con los nombres de distintos países. Si, por ejemplo, queremos buscar el país Estados Unidos, en los selects normales podemos pulsar la E (inicial de Estados Unidos) y buscar entre todos los países hasta que aparece el que queremos. Pero, con la implementación de este script podremos pulsar la E, con lo que se posicionará en el primer país que empiece por E (que no tiene porque ser el que buscamos, en la práctica será Ecuador). Luego podemos pulsar la letra S, con lo que se mostrará España, que no es el que buscamos. Más tarde se pulsaría la T, apareciendo Estonia y, por último, al pulsar la tecla A, ya aparece el elemento que buscábamos, ESTAdos Unidos.
El script
El script se encuentra comentado dentro del propio código, para que se pueda comprender fácilmente, o por lo menos sus bases. Básicamente, se utiliza el evento de teclado onKeyPress en el elemento select de los países, de modo que, cuando se pulse una tecla, si tenemos el foco en el select, se llamará a una función que se encargará de hacer el trabajo más duro.
Dicho trabajo consiste en recoger la tecla que se ha pulsado y guardarla en una estructura de datos, además de seleccionar el elemento más próximo al valor actual de la estructura de datos. Por último, si se pulsa la tecla enter, se deja el select con el último valor seleccionado y se pasa el foco al siguiente elemento del formulario para que el usuario siga rellenándolo.
<script language="JavaScript1.2">
var digitos=10 //cantidad de digitos buscados
var puntero=0
var buffer=new Array(digitos) //declaración del array Buffer
var cadena=""
function buscar_op(obj,objfoco){
var letra = String.fromCharCode(event.keyCode)
if(puntero >= digitos){
cadena="";
puntero=0;
}
//si se presiona la tecla ENTER, borro el array de teclas presionadas y salto a otro objeto...
if (event.keyCode == 13){
borrar_buffer();
if(objfoco!=0) objfoco.focus(); //evita foco a otro objeto si objfoco=0
}
//sino busco la cadena tipeada dentro del combo...
else{
buffer[puntero]=letra;
//guardo en la posicion puntero la letra tipeada
cadena=cadena+buffer[puntero]; //armo una cadena con los datos que van ingresando al array
puntero++;
//barro todas las opciones que contiene el combo y las comparo la cadena...
for (var opcombo=0;opcombo < obj.length;opcombo++){
if(obj[opcombo].text.substr(0,puntero).toLowerCase()==cadena.toLowerCase()){
obj.selectedIndex=opcombo;
}
}
}
event.returnValue = false; //invalida la acción de pulsado de tecla para evitar busqueda del primer caracter
}
function borrar_buffer(){
//inicializa la cadena buscada
cadena="";
puntero=0;
}
</script>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table width="544" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="89" height="29"></td>
<td width="114"></td>
<td width="26"></td>
<td width="315"></td>
</tr>
<tr>
<td height="19"></td>
<td valign="top">
<select name="combo1" onKeypress=buscar_op(this,text2) onblur=borrar_buffer() onclick=borrar_buffer()>
<option>Argentina</option>
<option>Australia</option>
<option>Bolivia</option>
<option>Brasil</option>
<option>Canada</option>
<option>Colombia</option>
<option>Dinamarca</option>
<option>Estados Unidos</option>
<option>Estonia</option>
<option>Austria</option>
<option>Bulgaria</option>
<option>Chile</option>
<option>España</option>
<option>China</option>
<option>Costa Rica</option>
<option>Croacia</option>
<option>Ecuador</option>
</select>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td height="18"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="28"></td>
<td colspan="2" valign="top">
<input type="text" name="text2">
</td>
<td></td>
</tr>
<tr>
<td height="58"></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Esperamos que podáis entender el script y utilizarlo en vuestras páginas web. Si os interesa, podéis descargar el script en un archivo comprimido.
Ignacio Rodriguez