我正在开发一本字典,当我开始输入时它会自动完成,它会显示以该字母开头的单词列表。(如词汇表网站)
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');
}
}
});
侃侃尔雅
相关分类