選擇列表元素（捕捉下/上箭頭）

我有以下HTML結構（「UL禮」呈現爲下拉/選擇）選擇列表元素（捕捉下/上箭頭）

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

需要使用Javascript/jQuery代碼捕獲向下箭頭按鍵事件（在輸入時）將選擇第一個「li」元素

連續向下鍵選擇下一個'li'元素;並向上鍵選擇以前的'li'元素。

來源

2012-07-09 I-M-JM

你是什麼意思_selecting li element_？ – undefined 2012-07-09 17:44:19

[你有什麼嘗試？]（http://whathaveyoutried.com） – 2012-07-09 17:45:58

告訴我們你已經嘗試過，看看這個問題的答案： http://stackoverflow.com/questions/8902787/navigate-through-list-使用箭頭鍵-javascript-jq – 2012-07-09 17:52:47

您可以使用MousetrapJS。這裏舉一個例子，你可以如何實現向下鍵。首先將選擇的類添加到第一個列表項。

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

來源

2012-07-09 17:49:57

'if（next）'將總是返回'true'，而不是使用if（next.length！== 0）'。 – 2017-01-21 21:49:24

由於您的問題有點太模糊，所以您不完全清楚您想要完成什麼。

如果你想突出li元素，使用：

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

這裏的小提琴：http://jsfiddle.net/GSKpT/

如果你只是想設置你的input的價值字段，將最後一行更改爲：

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

這是小提琴：http://jsfiddle.net/GSKpT/1/

來源

2012-07-09 17:53:31

不知道這個問題，但這個答案是我正在尋找:) – deckoff 2012-11-20 20:37:22

嗨，你如何上下推動列表，如果它是在溢出div容器？ – Patrick 2017-01-13 14:52:30

選擇列表元素（捕捉下/上箭頭）

回答

相關問題