Script en Javascript para posicionarse mediante la pulsación de teclas del teclado dentro de los elementos de un campo select de formulario.

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.



Untitled Document