Привет!
Я новичок в JavaScript и поэтому для своей задачи использовала микс из js и jQuery (сборная солянка из гугла). Но такой вариант не подходит.
Я хотела бы попробовать осуществить исполнение этой же задачи, а именно навигация по строкам выпадающего списка кнопками "вверх"-"вниз" на чистом JavaScripte.
Вот мой код в CodePen:
https://codepen.io/Sernato/pen/xxrBVQr
function myFunction() {
$('.search-list-block').addClass('show')
.find('.open-search')
.focus();
$('.wrap').addClass('show');
}
document.getElementById('wrap').onclick = function() {
var el = document.getElementById('search');
var ell = document.getElementById('wrap');
el.style.display === 'none' ? el.style.display = 'initial' : el.style.display = 'none';
ell.style.display === 'none' ? ell.style.display = 'initial' : ell.style.display = 'none';
}
$(document).on('keydown keyup', '.open-search', function(e){
let keyCode = {
'up': e.key == 'ArrowUp',
'down': e.key == 'ArrowDown',
'enter': e.key == 'Enter',
'tab': e.key == 'Tab'
};
if(keyCode.up || keyCode.down || keyCode.enter || keyCode.tab) {
e.preventDefault();
if(e.type == 'keydown') {
let item;
let unselect;
var list = $(this).closest('.search-list-block').find('.dropdown-content').find('li');
var modify_selected = 'selected';
var item_selected = $('.selected');
var children_element = $('.select-item');
let get_selected_item = list.find(item_selected);
if(keyCode.enter) {
$(this).blur();
}
unselect = get_selected_item.removeClass(modify_selected);
unselect.removeClass('selected');
if(keyCode.down || keyCode.tab) {
if (item_selected.parent().next().length == 0) {
item = list.first();
} else {
item = item_selected.parent().next();
}
}
if(keyCode.up) {
if(item_selected.parent().prev().length == 0) {
item = list.last();
} else {
item = item_selected.parent().prev();
}
}
if(item) {
$('.wrapper').css('overflow', 'hidden');
var this_item = item.children(children_element);
if(this_item.length) {
this_item[0].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
}
this_item.addClass('selected');
}
}
}
});
