JavaScript搜索框改造需求：支持同时搜索问题按钮文本与<dd>标签内的答案文本

没问题，我帮你把搜索功能扩展到同时匹配问题按钮文本和答案文本。只需要调整mySearch函数，让它同时检查按钮和对应的<dd>标签内容就行，具体改动如下：

修改后的完整JavaScript代码 #

function mySearch() { 
  var input = document.getElementById('myInput'), 
      filter = input.value.toUpperCase(), 
      li = document.querySelectorAll(".ul li"); 
  // 遍历所有列表项，隐藏不匹配搜索关键词的项
  for (var i = 0; i < li.length; i++) { 
    var questionBtn = li[i].querySelector("button"); 
    var answerText = li[i].querySelector(".answer");
    // 判断搜索关键词是否存在于问题文本 OR 答案文本中
    if (questionBtn.innerHTML.toUpperCase().indexOf(filter) > -1 || 
        answerText.innerHTML.toUpperCase().indexOf(filter) > -1) { 
      li[i].style.display = ""; 
    } else { 
      li[i].style.display = "none"; 
    } 
  } 
} 
var acc = document.getElementsByClassName("question"); 
var i; 
for (i = 0; i < acc.length; i++) { 
  acc[i].addEventListener("click", function() { 
    this.classList.toggle("active"); 
    var answer = this.nextElementSibling; 
    if (answer.style.display === "block") { 
      answer.style.display = "none"; 
    } else { 
      answer.style.display = "block"; 
    } 
  }); 
}

关键改动说明 #

• 新增获取每个列表项对应的答案元素：var answerText = li[i].querySelector(".answer");
• 更新判断逻辑，只要问题按钮文本或者答案文本中包含搜索关键词，就保留显示该列表项，用逻辑或||连接两个匹配条件

你的HTML结构不需要做任何调整，直接替换上面的JavaScript代码就能实现需求啦。

内容的提问来源于stack exchange，提问作者Megan Wise