¿Cómo hacer que una pulsación de tecla se vaya al siguiente elemento de una lista?

Así es como lo haría, para una solución a pequeña escala … Esto se puede adaptar fácilmente en un complemento jQuery.

   List navigation  .selected { background: yellow; }      
  • one
  • two
  • three
  • four

 $(function () { var $li = $('li'), getIndex = function ( context, selector ) { for ( var i = 0, len = context.length; i  -1 && $li.filter('.selected').length ) { current = getIndex( $li, '.selected'); if ( e.which === 38 ) { next = ( ( (current - 1) < 0 ) && $li.length - 1 ) || current -1; } if ( e.which === 40 ) { next = ( ( current === $li.length ) && current - $li.length ) || current +1; if ( next === $li.length ) { next = 0; } } $( $li[next] ).trigger('click'); } }); }); 

http://gist.github.com/622795

Tendría una clase CSS, como selected que definiría cómo se vería un elemento seleccionado. Luego adjuntaría oyentes de eventos para esas dos teclas, arriba y abajo.

Siempre que reciba un evento, averigüe dónde se aplica la selected actual selected , elimínela de ese elemento y aplíquela al segundo. También necesita tener algo de lógica para envolver desde arriba y desde abajo.

Además, es probable que desee cambiar el valor del campo de entrada (si lo tiene) al valor del elemento seleccionado. Si realmente desea la implementación visual perfecta, también necesita escribir un código para asegurarse de que el cursor no salte cuando vaya arriba y abajo de la lista.