используя клавишу со стрелкой в ​​div

Question

У меня есть два деления.Один из них содержит поле ввода, другой список предложений.То, что я хотел бы, это возможность для пользователя перейти во второй div с помощью клавиши со стрелкой и прокручивать список предложений.Вот как это выглядит:

<div id="first"><input type="text" /></div>

<div id="second"> 
<ul>
<li>suggestion</li>
<li>suggestion2</li>
<li>suggestion3</li>
</ul>
</div>

Я действительно нашел что-то здесь, в стеке: Fiddle

Но я не могу заставить его работать, потому что он использует имена классов иЯ использую идентификаторы вместо этого.Я был бы очень признателен, если бы кто-то переписал это для меня, чтобы я мог добавить идентификаторы.

Answer 1

Было довольно просто изменить работу скрипки так, как вы хотели:

jsfiddle

Имена классов были только там, чтобы выделить выбранный элемент. Скрипка использует идентификаторы для ссылки на обертку ввода и элементов. Это не сильно отличалось от вашего кода на самом деле. Теперь, когда вы видите, что он работает с вашим кодом, вы сможете вносить и вносить дополнительные изменения, которые считаете нужными. Надеюсь, это поможет.

РЕДАКТИРОВАТЬ: Woops. Похоже, я забыл обновить скрипку. Это было исправлено.

Answer 2

Используйте событие onKeyDown, как

function KeyDownEvent(Event)
{
    if (Event.keyCode == 40) // down key was pressed 
    else if (Event.keyCode == 38) // up key was pressed
}

document.getElementById("textinput").onkeydown = KeyDownEvent;

Тогда ваш входной HTML будет выглядеть так:

<input type="text" id="textinput" />

Обратите внимание, что мой пример не использует часто ненужную библиотеку jQuery.

В реальных событиях вы затем изменили бы стиль элементов списка и сохранили, какое значение было выбрано пользователем для автозаполнения, что вы должны теперь сами выяснить.