Ver Mensaje Individual
  #1 (permalink)  
Antiguo 10/02/2012, 01:43
gebremswar
 
Fecha de Ingreso: enero-2012
Ubicación: Santiago de Surco, Lima - Perú
Mensajes: 266
Antigüedad: 10 años, 6 meses
Puntos: 57
Pregunta agregar valor a input text al desplazarse por resultado de búsqueda con las flechas

Saludos en FDW. No se si describí bien el problema en el titulo, pero ahi va mi problema:

En un sistema web q estoy desarrollando incluí un buscador dinamico algo similar a como es google y youtube, almenos en apariencia; pueden ver una imagen en este enlace:

Código link:
Ver original

Dicho buscador es un input text el cual llama a una funcion Ajax en el evento onKeyUp para consultar a la BD (mientras escribo se va mostrando las coincidencias) y muestra la tabla en la parte inferior con los nombres. Seguido a esto hay que hacerle un clic con el mouse sobre uno de esos nombres para mostrar los detalles del mismo en un "div" por debajo de esa caja de busqueda (con el evento "onclick" claro está).

Lo que deseo es agregarle funciones a las flechas del cursor en el teclado (flechas direccionales), en especial de arriba y abajo. Y de este modo reeemplazar el texto del input text con el respectivo valor con cada desplazamiento de la tecla arriba y abajo y finalmente darle ENTER cuando el input text tenga el valor que desee, similar a como lo hace el buscador de google y youtube en sus cajas de búsqueda.

Estuve buscado las teclas en temas de javascript en este foro y encontré lo siguiente:

Código:
if (keyCode == 39)
alert("flecha derecha")
  else if (keyCode == 40)
//alert("flecha abajo")
MarcaCheck ();
  else if (keyCode == 38)
alert("flecha arriba")
  else if (keyCode == 37)
alert("flecha izquierda")
  return true;
}
Quiero lograr el efecto de la seudo clase hover como también el cambio en valor del input text como ya explique similar a los buscadores nombrados (siendo lo mas importante el cambio de valor al desplazarme). De la apariencia me encargo yo; solo quiero saber lo que necesito en la funcion javacript con un ejemplo ya sea sencillo o complejo para poder entenderlo y poder aplicarlo a lo que tengo. Y si también alguien sabe hacerlo con JQuery bienvenido sean ambas soluciones, seria estupendo para mi aprendizaje aunque en realidad quiero hacerlo sin usar ese framework a modo de aprender mucho mas javacript.

Aclaro, estoy usando AJAX para lograr la tabla con resultados dinámicos y como lenguaje de programación del lado de servidor uso JAVA (jsp) pero creo que esto ultimo es indiferente para la solución que me puedan dar.

Muchas gracias de antemano.

Última edición por gebremswar; 10/02/2012 a las 01:52