JS在input标签上使用keyup事件进行搜索

JS search using keyup event on input tag

本文关键字：事件 keyup 搜索 input 标签 JS      更新时间：2023-09-26

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

您不希望将同一个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>

相关文章：