Выбор элементов div с помощью стрелки вниз в автозаполнении JavaScript

Question

Я разрабатываю текстовое поле автозаполнения, в котором я заполнил предложения в div, в котором каждое предложение представляет собой div с уникальным идентификатором. Теперь я хочу выбрать каждое предложение, используя стрелку вниз, а также выделить и выделить жирным шрифтом совпадающие строки, введенные вautosuggest textbox

Например, в следующем коде

function displaySuggestions(suggestions){
  for(var i=0 ;i<suggestions.length ; i++){
    var div_display  = document.createElement('div');
    div_display.innerHTML = suggestions[i];
    div_display.className = "autosuggest_display_div";
    div_display.id = "autosuggest_display_div_"+i;        
    div.appendChild(div_display);        
}

Здесь div - это autosuggest div, содержащий предложения для каждого div. Если я нажимаю клавишу, то вместо этого выделяется весь divкаждого элемента div, как показано в следующем коде

if(event.keyCode == '40'){
    for(var i=0;i<div.childNodes.length;i++){
      div.childNodes[i].style.background = "red";
}

Только при нажатии стрелки на клавиатуре вниз должен выделяться только один элемент div

Answer 1

• Посмотрите на keypress событие.
• Код клавиши со стрелкой вниз 40.
• Добавьте класс selected к каждому выбранному классу и используйте CSS, чтобы выделить его.