javascript - 如何从事件监听器中排除向下箭头键

Question

我正在开发一个字典，它在我开始输入时具有自动完成功能，它将单词显示为以该字母开头的列表。（像词汇.com）

searchInput.addEventListener('keyup',function(){
        let search = $('#search').val()
        
       
        $.ajax({
            type: 'GET',
            url: '/home/autocomplete/' + search
            dataType: "json",

            success: function (response) {
            let word = response.words
            suggestionsPanel.innerHTML = '';
           
            
    $.each(word, function (idx, w) {
        $('.suggestions').append(`<li name = ${w}>${w}</li>`)
        // $('.suggestions li:first').addClass('selected')
})};

现在我想添加向下箭头键来浏览列表。我添加了另一个按键事件侦听器购买它继续执行第一个事件侦听器功能。如何使其两者都起作用？

var li = $('.suggestions > li');
            var liSelected; 
            $(window).keydown(function(e) {
                if(e.which === 40) {
                    if(liSelected) {
                        liSelected.removeClass('selected');
                        next = liSelected.next();
                        if(next.length > 0) {
                            liSelected = next.addClass('selected');
                        } else {
                            liSelected = li.eq(0).addClass('selected');
                        }
                    } else {
                        liSelected = li.eq(0).addClass('selected');
                    }
                } else if(e.which === 38) {
                    if(liSelected) {
                        liSelected.removeClass('selected');
                        next = liSelected.prev();
                        if(next.length > 0) {
                            liSelected = next.addClass('selected');
                        } else {
                            liSelected = li.last().addClass('selected');
                        }
                    } else {
                        liSelected = li.last().addClass('selected');
                    }
                }
            });

标签： javascripthtml

Answer 1

该keyup 事件发出一个keyCode属性，您可以使用它来识别向下箭头键。

如果找到，您可以在此基础上退出回调。

向下箭头键的键码为 40。

searchInput.addEventListener('keyup', function(evt) {
    if (evt.keyCode == 40) return;
    //otherwise continue...