如何检索用户输入并显示用户输入卡Javascript？

Question

尝试过滤用户输入，以便当用户开始输入 run 函数时。

我想要什么

当用户开始打字时，上课时开始查找卡片

product-name

并显示

block

结果。

例如：

用户开始输入内容... 皮兹

显示

block

卡披萨

我的Javascript

// search bar function
const search = () => {
    var input, filter, data, productName, i, txtValue;
    data = this.data;
    input = document.getElementById("user-input");
    filter = input.value.toUpperCase();
    getInput = input.value;
    console.log("User input: " + getInput);
    
    document.querySelectorAll('.cards').forEach(function(data) {
        for (i = 0; i < data.length; i++) {
            productName = data[i].querySelectorAll(".produce-name")[0];
            txtValue = productName.textContent || productName.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                data[i].style.display = "";
            } else {
                data[i].style.display = "none";
            }
        }
     });
};

我的HTML

<form class="form-inline flexSearchWrapper">
  <input class="form-control mr-sm-2" type="search" placeholder="Busca algo..." aria-label="Search" id="user-input" onkeyup="search();">
</form>

我不明白我做错了什么？目前，我的

console.log()

输出仅获取用户输入以及它们当前输入的内容。谢谢！

更新

卡信息 HTML

<div class="card cards">
  <img src="https://images.vexels.com/media/users/3/185266/isolated/lists/815ded7afc1c54dfb5a60f81f68f928b-pizza-slice-icon.png" class="card-img-top p-3 product-image" alt="...">
  <div class="card-body">
    <h5 class="card-title product-name">Pizza</h5>
    <h5 class="text-muted fw-bold card-price product-price">S/ 12.50 PEN</h5>
  </div>
</div>

我将其放入

.forEach

循环中，以便获取每张卡片的

.product-name

。

Answer 1

由于以下几个问题，您的解决方案不起作用：

1. 您在

   forEach

   内部有一个嵌套循环。

   data

   是单个卡片元素。循环它会循环它的属性，这不是你需要的。
2. 产品名称属于

   .product-name

   类别，而不是

   .produce-name

   。如果您需要单个元素，请务必使用

   querySelector

   而不是

   querySelectorAll

   。

下面我编写了您的代码的不同版本。无需查找每张卡片的标题元素，而是将所需的数据添加到

.card

元素本身。您可以使用数据属性来做到这一点。在本例中，我为每张卡添加了

data-name

，这将是我们可以过滤的值。

然后，当您在搜索字段中输入内容时，获取该字段的值并循环遍历所有卡片。如果

data-name

值包含您输入的任何内容，则会添加或删除一个类以显示或隐藏该卡。通过使用类，您可以让 CSS 负责样式。

const form = document.querySelector('#search');
const cards = document.querySelectorAll('.card')

form.addEventListener('input', event => {
  const value = event.target.value.trim().toLowerCase();
  
  for (const card of cards) {
    const { name } = card.dataset;
    const shouldShow = name.includes(value);
    card.classList.toggle('hide', !shouldShow);
  }
});

.cards {
  display: flex;
  gap: 10px;
}

.card.hide {
  display: none;
}

<form id="search" class="form-inline flexSearchWrapper">
  <input class="form-control mr-sm-2" type="search" placeholder="Busca algo..." aria-label="Search" id="user-input">
</form>

<div class="cards">
  <div class="card" data-name="pizza">
    <img src="https://images.vexels.com/media/users/3/185266/isolated/lists/815ded7afc1c54dfb5a60f81f68f928b-pizza-slice-icon.png" class="card-img-top p-3 product-image" alt="...">
    
    <div class="card-body">
      <h5 class="card-title product-name"><a href="#" class="test">Pizza</h5>
      <p class="text-muted fw-bold card-price product-price">S/ 12.50 PEN</p>
    </div>
  </div>
  
  <div class="card" data-name="penne">
    <img src="https://images.vexels.com/media/users/3/185266/isolated/lists/815ded7afc1c54dfb5a60f81f68f928b-pizza-slice-icon.png" class="card-img-top p-3 product-image" alt="...">
    
    <div class="card-body">
      <h5 class="card-title product-name"><a href="#" class="test">Penne</h5>
      <p class="text-muted fw-bold card-price product-price">S/ 12.50 PEN</p>
    </div>
  </div>
</div>

我还以不同的方式使用

cards

类，因为它没有意义 - 至少对我来说 - 对于一张卡来说，同时具有

card

和

cards

作为一个类。

并确保正确使用标题

h1...h6

。它不是为了样式，而是为了向浏览器解释它应该如何解释内容。