选择列表元素(捕获向下/向上箭头)

时间:2022-02-21 00:08:18

I have following HTML structure ('ul li' are rendered as drop-down/select)

我有以下HTML结构('ul li'呈现为下拉/选择)

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

Need JavaScript/jQuery code to capture down arrow key press event (on input) which will select first 'li' element

需要JavaScript / jQuery代码来捕获向下箭头键按下事件(在输入时),它将选择第一个'li'元素

Consecutive down key select next 'li' elements; and up key select previous 'li' elements.

连续向下键选择下一个'li'元素;和向上键选择以前的'li'元素。

2 个解决方案

#1


16  

Since your question is a little too vague, it's not exactly clear what you're trying to accomplish.

由于您的问题有点过于模糊,因此您要完成的内容并不完全清楚。

If you're trying to highlight the li elements, use this:

如果您要突出显示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');
});​

Here's the fiddle: http://jsfiddle.net/GSKpT/

这是小提琴:http://jsfiddle.net/GSKpT/


If you're just trying to set the value of your input field, change the last line to this:

如果您只是尝试设置输入字段的值,请将最后一行更改为:

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

Here's the fiddle: http://jsfiddle.net/GSKpT/1/

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

#2


0  

You can use MousetrapJS for this. Here an example how you could implement the down key. First add the class selected to the first list item.

您可以使用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");
    }
});

#1


16  

Since your question is a little too vague, it's not exactly clear what you're trying to accomplish.

由于您的问题有点过于模糊,因此您要完成的内容并不完全清楚。

If you're trying to highlight the li elements, use this:

如果您要突出显示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');
});​

Here's the fiddle: http://jsfiddle.net/GSKpT/

这是小提琴:http://jsfiddle.net/GSKpT/


If you're just trying to set the value of your input field, change the last line to this:

如果您只是尝试设置输入字段的值,请将最后一行更改为:

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

Here's the fiddle: http://jsfiddle.net/GSKpT/1/

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

#2


0  

You can use MousetrapJS for this. Here an example how you could implement the down key. First add the class selected to the first list item.

您可以使用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");
    }
});