选择列表元素（捕捉下/上箭头）

我有以下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

选择列表元素（捕捉下/上箭头）

回答

相关问题