Javascript 使用输入标记上的keyup事件进行JS搜索

我有几个具有不同文本内容的

div

元素和一个

input

标记

<input id="search" type="text"/>

<div class="list>
  <div id="el"> red </div>
  <div id="el"> blue </div>
  <div id="el"> red green </div>
</div>

我的JS代码：

input.value = "red"
/* "red" and "red green" are displayed, "blue" is hidden */

var search=document.getElementById（“search”）；
var el=document.getElementById（“el”）；
search.addEventListener（“keyup”，function（））{
if（search.value==el.textContent）{
el.style.display=“block”}
否则{
el.style.display=“无”}）

红色
蓝色
红绿

您不想将相同的

id

分配给多个项目。而是使用

类

请参阅下面的工作解决方案：

var search=document.getElementById（“search”）；
var els=document.queryselectoral（“.el”）；
search.addEventListener（“keyup”，function（））{
Array.prototype.forEach.call（els，函数（el）{
if（el.textContent.trim（）.indexOf（search.value）>-1）
el.style.display='block'；
else el.style.display='none'；
});
});

红色
蓝色
红绿
IDs必须是唯一的问题。顺便说一下，我假设您仍然希望输入“绿-红”来显示“红-绿”
？我现在正在努力改进解决方案。我可以在3分钟内接受：）再次感谢，但没有必要