Foros del Web » Programando para Internet » Javascript »

Seleccionar <li> contenido en <ul> con el teclado

Estas en el tema de Seleccionar <li> contenido en <ul> con el teclado en el foro de Javascript en Foros del Web. Buenas tardes amigos! He estado intentando por horas pero no logro seleccionar las (<li>)opciones contenidas dentro de un <ul> que genero por medio de un ...
  #1 (permalink)  
Antiguo 06/06/2012, 15:41
 
Fecha de Ingreso: octubre-2009
Ubicación: Merida Yucatan
Mensajes: 93
Antigüedad: 14 años, 6 meses
Puntos: 2
Pregunta Seleccionar <li> contenido en <ul> con el teclado

Buenas tardes amigos!

He estado intentando por horas pero no logro seleccionar las (<li>)opciones contenidas dentro de un <ul> que genero por medio de un $.post para hacer un autocomplete

Mi estructura es la siguiente
<ul>
<li> <a>hola </a> </li>
<li> <a>mundo </a> </li>
</ul>

Quisiera que al presionar las teclas de arriba y abajo del teclado, me seleccione o recupere el valor de la opción del <li>.

Tengo el siguiente código

Código:
<script>
$(document).ready(function(){
 	$(".buscador_ajax").focus(function(){ //Ejecutar si está el foco sobre textbox
      $(".buscador_ajax").keyup(function(event){
				var tecla_presionada = event.which ;
 				$(".sugerencias>li").each(function(indice,valor) {

				});  
  			 });	
		});
	
	});
</script>
Me ayudan a completar mi código.
Gracias se los voy a agradecer de por vida!
__________________
globalmodularsystems.com/
  #2 (permalink)  
Antiguo 06/06/2012, 16:14
 
Fecha de Ingreso: octubre-2009
Ubicación: Merida Yucatan
Mensajes: 93
Antigüedad: 14 años, 6 meses
Puntos: 2
Respuesta: Seleccionar <li> contenido en <ul> con el teclado

Solución
$(function(){
$(window).keydown(function(e){
if(e.which === 40){ //down
if($('li.selected').length === 0){ //Si no esta seleccionado nada
$('li:first').addClass('selected');
}
}else if(e.which === 38){ //arriba
$('li.selected').removeClass('selected');
}else if(e.which === 39){ //abajo
var liSelected = $('li.selected');
if(liSelected.length === 1 && liSelected.next().length === 1){
liSelected.removeClass('selected').next().addClass ('selected');
}
}else if(e.which === 37){ //izquierda
var liSelected = $('li.selected');
if(liSelected.length === 1 && liSelected.prev().length === 1){
liSelected.removeClass('selected').prev().addClass ('selected');
}
}
});
});​

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
__________________
globalmodularsystems.com/
  #3 (permalink)  
Antiguo 07/06/2012, 05:40
 
Fecha de Ingreso: junio-2012
Ubicación: Alicante
Mensajes: 44
Antigüedad: 11 años, 10 meses
Puntos: 6
Respuesta: Seleccionar <li> contenido en <ul> con el teclado

No hay mejor satisfaccion que resolver un problema uno mismo.
__________________
Pincha en Me gustó, ¡gracias! para agradecer.

Etiquetas: autocomplete_teclado, seleccionar_opcion, autocompletado
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:56.