Стрелка вверх / вниз jQuery События в поле поиска

Question

Я пытаюсь реализовать функциональность, аналогичную упомянутой в Ключевые события jQuery с окном поиска

Я хотел бы стрелять вверх и вниз по результатам поиска и выбирать результат по клавише ввода или щелчку мыши.

Найти мой код по адресу: http://jsfiddle.net/CyQ2w/

3 номера:

Я могу стрелять вверх и вниз, но когда я стрелка вниз после последнего элемента, выбор на элемент исчезает. Я пытаюсь отключить просмотр после последнего элемента, т.е. оставить последний выбранный элемент. То же самое происходит с первым элементом, когда мы на нем стрелка вверх.

При наведении указателя мыши на список элементов и наведении указателя мыши курсор мыши удаляется, и теперь стрелки вверх и вниз не работают.

Кроме того, клавиша ввода, похоже, не устанавливает текстовое поле с выбранным элементом. Я пытаюсь захватить «id» выбранного li.

Любая помощь будет высоко оценена.

Answer 1

Для вашей первой проблемы вы можете добавить проверку следующим образом -

...
else if (code === 40) { //Down arrow
        if($("li.hovered").index()==$("li").length-1) return;
...
else if (code === 38) { //Up arrow
        if($("li.hovered").index()==0) return;
        ...

Это означает, что когда вы находитесь в первом элементе index 0, нажатие стрелки вверх ничего не изменит.

Кстати, 38 не стрелка вниз, а стрелка вверх.Не путай других. Я надеюсь, что вы можете выполнить проверку Дауна самостоятельно.

Вы можете решить проблему секунда , как показано ниже -

$("#userlist_container li").hover(function () {
    $('li.hovered').removeClass('hovered');
    $(this).addClass("hovered");
}, function () {
    // $(this).removeClass("hovered");
});

И ваш третья проблему немного сложно объяснить без всего кода, поэтому проверьте мой обновленный код на http://jsfiddle.net/CyQ2w/7/

Вы должны блокировать события с e.preventDefault();