Lựa chọn Danh sách Element (chụp xuống/lên mũi tên)

Question

Tôi đã theo cấu trúc HTML ('ul li' được trả lại như thả xuống/chọn)

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

Cần mã JavaScript/jQuery để nắm bắt mũi tên xuống nhấn phím sự kiện (trên đầu vào) sẽ chọn phần tử 'li' đầu tiên

Phím liên tiếp chọn các thành phần 'li' tiếp theo; và lên phím chọn các phần tử 'li' trước đó.

Answer 1

Bạn có thể sử dụng MousetrapJS cho việc này. Dưới đây là một ví dụ làm thế nào bạn có thể thực hiện các phím xuống. Đầu tiên thêm lớp được chọn vào mục danh sách đầu tiên.

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

Vì câu hỏi của bạn hơi quá mơ hồ, nên không rõ bạn đang cố gắng làm gì.

Nếu bạn đang cố gắng để làm nổi bật li yếu tố, sử dụng này:

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

Đây là fiddle: http://jsfiddle.net/GSKpT/

---

Nếu bạn chỉ cố gắng để thiết lập giá trị của input của bạn trường, thay đổi dòng cuối cùng thành điều này:

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

Dưới đây là fiddle: http://jsfiddle.net/GSKpT/1/