Selezione List Element (catturando giù/freccia in alto)

Question

Ho seguente struttura HTML ('ul li' sono reso come discesa/selezionare)

<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> 

bisogno di codice JavaScript/jQuery per catturare freccia giù pressione di un tasto evento (in ingresso) che selezionerà il primo elemento 'li'

Tasto giù consecutivo seleziona gli elementi successivi 'li'; e su tasto seleziona i precedenti elementi 'li'.

Answer 1

Per questo è possibile utilizzare MousetrapJS. Ecco un esempio di come potresti implementare il tasto giù. Per prima cosa aggiungi la classe selezionata alla prima voce dell'elenco.

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

Poiché la tua domanda è un po 'vaga, non è esattamente chiaro cosa stai cercando di realizzare.

Se si sta cercando di mettere in evidenza gli elementi li, utilizzare questo:

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'); 
});​ 

Ecco il violino: http://jsfiddle.net/GSKpT/

---

Se stai solo cercando di impostare il valore della vostra input campo, modificare l'ultima riga a questo:

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

Ecco il violino: http://jsfiddle.net/GSKpT/1/