在自动完成 javascript 中使用向下箭头选择 div 的元素

Question

我正在开发自动完成文本框，我在其中填充了 div 中的建议，其中每个建议都是具有唯一 id 的 div。现在我想使用向下箭头选择每个建议 并突出显示并加粗在自动建议文本框中键入的匹配字符串

例如在下面的代码中

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 是自动建议的 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 为其提供所需的突出显示。