javascript - 在输入标签上使用 keyup 事件的 JS 搜索

Question

我有几个具有不同文本内容的 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>

我想得到这样的东西:如果 div 的 textContent 等于 input.value，则显示此 div。否则，它是隐藏的。

示例:

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

我的JS代码:

var search = document.getElementById("search");
var el = document.getElementById("el");

search.addEventListener("keyup", function(){
  if(search.value == el.textContent){
    el.style.display = "block"}
  else{
    el.style.display = "none"}})
    

<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>

Answer 1

您不想将相同的 id 分配给多个元素。而是使用 class。

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

var search = document.getElementById("search");
var els = document.querySelectorAll(".el");

search.addEventListener("keyup", function() {

  Array.prototype.forEach.call(els, function(el) {
    if (el.textContent.trim().indexOf(search.value) > -1)
      el.style.display = 'block';
    else el.style.display = 'none';
  });

});

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

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

</div>

这里是无论输入位于何处的解决方案，只要它是空格分隔的(以防万一):

var search = document.getElementById("search");
var els = document.querySelectorAll(".el");

search.addEventListener("keyup", function() {
  Array.prototype.forEach.call(els, function(el) {
    var values = search.value.split(' ');
    var display = true;
    for (var i = 0; i < values.length; i++) {
      if(el.textContent.trim().indexOf(values[i]) === -1)
        display = false;
    }
    
    el.style.display = display ? 'block' : 'none';
  });
});

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

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

</div>