Selecting List Element (capturing down/up arrow)

Question

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

<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

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

Show us what you have tried and look this question answered: http://stackoverflow.com/questions/8902787/navigate-through-list-using-arrow-keys-javascript-jq — Filipe Manuel, Jul 09 '12 at 17:52

Joseph Silber · Answer 1 · 2020-02-11T20:22:29.283

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:

var $listItems = $('li');

$('input').keydown(function(e) {
    var key = e.keyCode;
    var $selected = $listItems.filter('.selected');
    var $current;

    if (![38, 40].includes(key)) 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/

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/

Not sure about the question, but this answer is what I was looking for :) — deckoff, Nov 20 '12 at 20:37
Hi, and how do you push the list up and down if it's in an overflow div container? — Patrick, Jan 13 '17 at 14:52
thanks @Joseph its very good method , i am using your code and this is what I was looking for too. — Aria5h4h, Feb 10 '20 at 19:30

Split Your Infinity · Answer 2 · 2017-02-20T18:41:05.807

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.

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

edited Feb 20 '17 at 18:41

answered Jul 09 '12 at 17:49

Split Your Infinity

4,159
1
21
19

`if(next)` will always return `true`, use `if(next.length !== 0)` instead. – Oleg Berman Jan 21 '17 at 21:49

Selecting List Element (capturing down/up arrow)

2 Answers2