Selección de la lista del elemento (la captura de abajo/flecha hacia arriba)

Question

He siguiente estructura HTML ('li ul' se representan como desplegable/seleccionar)

<input id="input_city" type="text" /> 

<div class="suggestions"> 
<ul> 
    <li value="0" name="New York">New York</li> 
    <li value="1" name="London">London</li> 
    <li value="2" name="Paris">Paris</li> 
    <li value="3" name="Sydney">Sydney</li> 
</ul> 
</div> 

Necesidad código JavaScript/jQuery para capturar la flecha hacia abajo pulse la tecla evento (en la entrada) que seleccionará el primer elemento 'li'

Tecla abajo consecutiva seleccione los siguientes elementos 'li'; y tecla arriba selecciona los elementos 'li' anteriores.

Answer 1

Puede usar MousetrapJS para esto. Aquí un ejemplo de cómo podría implementar la tecla de abajo. Primero agregue la clase seleccionada al primer elemento de la lista.

Mousetrap.bind('down', function() { 
    var next = $(".suggestions li.selected").removeClass("selected").next(); 
    if (next.length) { 
     next.addClass("selected"); 
    } else { 
     $(".suggestions li").first().addClass("selected"); 
    } 
}); 

Answer 2

Desde su pregunta es un poco demasiado vaga, no se sabe exactamente lo que estamos tratando de lograr.

Si usted está tratando de poner de relieve los elementos li, utilice esto:

var $listItems = $('li'); 

$('input').keydown(function(e) 
{ 
    var key = e.keyCode, 
     $selected = $listItems.filter('.selected'), 
     $current; 

    if (key != 40 && key != 38) return; 

    $listItems.removeClass('selected'); 

    if (key == 40) // Down key 
    { 
     if (! $selected.length || $selected.is(':last-child')) { 
      $current = $listItems.eq(0); 
     } 
     else { 
      $current = $selected.next(); 
     } 
    } 
    else if (key == 38) // Up key 
    { 
     if (! $selected.length || $selected.is(':first-child')) { 
      $current = $listItems.last(); 
     } 
     else { 
      $current = $selected.prev(); 
     } 
    } 

    $current.addClass('selected'); 
});​ 

Aquí está el violín: http://jsfiddle.net/GSKpT/

---

Si usted está tratando de establecer el valor de su input campo, cambie la última línea a esto:

$(this).val ($current.addClass('selected').text()); 

Aquí está el violín: http://jsfiddle.net/GSKpT/1/