(aşağı yakalama/yukarı ok)

Question

Ben HTML yapısını ('ul li' açılır olarak işlenen/select) aşağıdakilere sahip

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

ok tuşu basın aşağı çekmek için JavaScript/jQuery kodu Need ilk 'li' öğesini seçecek olay (girişte)

Ardışık aşağı tuşu sonraki 'li' öğelerini seçin; ve yukarı tuş önceki 'li' öğelerini seçer.

Answer 1

Bunun için MousetrapJS kullanabilirsiniz. Burada aşağı tuşunu nasıl uygulayabileceğinize örnek. İlk önce seçilen listeyi ilk liste öğesine ekleyin.

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

Sorunuz biraz fazla belirsiz olduğundan, tam olarak neyi başarmaya çalıştığınız net değil. Eğer li unsurları vurgulamak için çalışıyorsanız

, bunu kullanın: Eğer sadece input değerini ayarlamak çalışıyorsanız http://jsfiddle.net/GSKpT/

---

: Burada

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

keman var alanına son satırı şu şekilde değiştirin:

İşte keman: http://jsfiddle.net/GSKpT/1/