DesarrolloWeb.com > Manuales > Taller de Javascript

ej. css Buscar

Login | Registro

Por Ignacio Rodriguez

23 de diciembre de 2002 Valoracin:

0 votos

8 Comentarios Scripts en Javascript

Script en Javascript para posicionarse mediante la pulsacin de teclas

del teclado dentro de los elementos de un campo select de formulario.

Javascript para posicionarse en un select

Se trata de un script para posicionarse en un

elemento de un select, es decir, para conseguir

que, pulsando unas teclas del teclado que podran

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 descripcin un poco larga, pero en realidad

el efecto es sencillo. En los select de las pginas

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 tendra

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

funcin de bsqueda en los select, ya que permite realizar la pulsacin de varias teclas

seguidas y va mostrando aquel elemento que comienza por todas las letras que se han

pulsado (una detrs 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 pases. Si, por ejemplo,

queremos buscar el pas Estados Unidos, en los selects normales podemos pulsar la E

Google Adwordswww.google.com.mx

Coloca Tu Empresa en Google.

Invierte $200 Recibe $600. Hoy!

queremos buscar el pas Estados Unidos, en los selects normales podemos pulsar la E

(inicial de Estados Unidos) y buscar entre todos los pases hasta que aparece el que

queremos. Pero, con la implementacin de este script podremos pulsar la E, con lo que se

posicionar en el primer pas que empiece por E (que no tiene porque ser el que buscamos,

en la prctica ser Ecuador). Luego podemos pulsar la letra S, con lo que se mostrar

Espaa, que no es el que buscamos. Ms tarde se pulsara la T, apareciendo Estonia y, por

ltimo, al pulsar la tecla A, ya aparece el elemento que buscbamos, ESTAdos Unidos.

El script

El script se encuentra comentado dentro del propio cdigo, para que se pueda comprender

fcilmente, o por lo menos sus bases. Bsicamente, se utiliza el evento de teclado

onKeyPress en el elemento select de los pases, de modo que, cuando se pulse una tecla, si

tenemos el foco en el select, se llamar a una funcin que se encargar de hacer el trabajo

ms duro.

Dicho trabajo consiste en recoger la tecla que se ha pulsado y guardarla en una estructura

de datos, adems de seleccionar el elemento ms prximo 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 rellenndolo.

var digitos=10 //cantidad de digitos buscados

var puntero=0

var buffer=new Array(digitos) //declaracin 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 accin de pulsado de tecla para evitar

busqueda del primer caracter

}

function borrar_buffer(){

//inicializa la cadena buscada

cadena="";

puntero=0;

}

Untitled Document

Argentina

Australia

Bolivia

Brasil

Canada

Colombia

Dinamarca

Estados Unidos

Estonia

Austria

Bulgaria

Chile

Espaa

China

Costa Rica

Croacia

Ecuador

AutorIgnacio Rodriguez

Subir

ManualTaller de Javascript

Confirmacin de envo de formulario Inhibir un campo texto de formulario con Javascript

javicalle

Comentarios Enviar un comentario al artculo

Esperamos que podis entender el script y utilizarlo en vuestras pginas web. Si os interesa,

podis descargar el script en un archivo comprimido.

0 votos

22/3/2005

javicalle

He utilizado este util script para mi aplicacin, pero he modificado el bucle

donde recorre el contenido del

E-mail:

Clave:

Recordar este usuario

Login

Olvidaste tu clave?

Registrarse

Principales

Manuales

FAQs

En directo

Vdeos

Monotemticos

Desde cero

HTML, CSS

Javascript, Ajax

Diseo, ASP

Blogging

Actualidad

De inters

Agenda

Powered by:

Desarrolloweb.com Copyright Publicidad Acerca de Datos legales Contacta