Download - Javascript Para Posicionarse en Un Select
-
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