javascript - 简单页面搜索的代码问题

Question

我正在尝试构建一个简单的页面搜索，它使用事件监听器来查看容器数据，然后在没有所需信息时隐藏整个容器。

到目前为止我有:

    // get search element
    let searchInput = document.getElementById ('searchInput'); 

    // add event listener
    searchInput.addEventListener ('keyup', searchPage);


    function searchPage(){
      //search input detection
      let searchValue = document.getElementById('searchInput').value;

      //set parameters to search from
      let  parent = document.getElementById('product-container');
      let child = parent.getElementsByTagName('span');

          for(let i = 0;i < child.length;i++){

            let a = child[i];

            if(a.innerHTML.indexOf(searchValue) >= -1) {

              child[i].parentNode.style.display = '';

            } else {

              child[i].parentNode.style.display = 'none';

            };

          };
    };

但这只作用于它找到的第一个产品容器，页面上有 5 个这样的容器。

我如何查看所有容器，但隐藏那些不包含在搜索栏中输入的任何信息的容器。

我从 API 获取产品，因此使用 html 替换添加到以下模板:

    <script id="template" type="text/template">
        <div class="product">
          <div class="product--header">{{ type }}</div>
          <div class="product--image"><img src="../app/assets/images/no-image.png" alt="no image"> </div>
          <div class="product--information" id="product--information">
            <div class="product--title"><span>{{ name }}</span></div>
            <!--This is just a place holder we would house the prices here if they were on the API -->
            <div class="product--price">£55</div>
            <div class="product--brand"><strong>Brand:</strong><span> {{ brand }}</span></div>
            <div class="product--colour"><strong>Colour:</strong><span> {{ colour }}</span></div>
            <div class="product--sizes">
              <select>
                  <option value="" disabled selected>Select Size </option>
                  {{ options }}
              </select>
            </div>
            <div class="product--description"><strong>Description:</strong><br><div class="product--description__content"><span> {{ description }} </span></div></div>
            <div class="product--code"><strong>Product ID:</strong><span> {{ productid }}</span></div>
            <div class="product--buttons">
              <button class="btn--buy" aria-label="Add to Basket">Add to basket</button>
              <button class="btn--save" aria-label="Save for Later">Save for later</button>     
            </div>
            <button class="product--add-to-wishlist" aria-label="Add to Wishlist"><i class="fas fa-heart"></i></button>
          </div>
        </div>
    </script>

搜索框代码如下:

    <input type="text" name="search" id="searchInput" placeholder="Enter Search...">

模板进入的代码是:

    <div id="product-container">
      <div class="featured"></div>
      <div class="products"></div>
    </div>

Answer 1

因为您有多个产品容器，请使用 document.getElementsByClassName() 而不是 document.getElementById() 并提供产品容器类作为参数。

let searchInput = document.getElementsByClassName ('container'); 

您需要修改searchPage() 方法。不要使用 document 来查找 searchValue 和 parent，而是使用 this。

let searchValue = this.getElementsByClassName('searchInput')[0].value;
let parent = this.getElementsByClassName('container')[0];

请添加 HTML 代码。

编辑:如果我理解正确的话，您有一个搜索输入将搜索多个产品容器。这是一个简单的示例，您可以轻松地将其应用于您的问题。

HTML:

<input type="text" name="search" id="searchInput" placeholder="Enter Search...">

<div class="product-container">
  <span class="product">Kiwi</span>
  <p>Kiwi description</p>
</div>

<div class="product-container">
  <span class="product">Banana</span>
  <p>Banana description</p>
</div>

<div class="product-container">
  <span class="product">Apple</span>
  <p>Apple description</p>
</div>

JS:

    let searchInput = document.getElementById ('searchInput'); 
    searchInput.addEventListener ('keyup', searchPage);

    function searchPage(){
      let searchValue = this.value.toUpperCase();
      let products = document.getElementsByClassName('product');

          for(let i = 0; i < products.length; i++) {
            console.log(products[i].innerHTML.toUpperCase());
            if (products[i].innerHTML.toUpperCase().indexOf(searchValue) > -1)
              products[i].parentNode.style.display = '';
            else 
              products[i].parentNode.style.display = 'none';
          };
    };

CSS:

.product-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  background: grey;
}

.product-container span {
  font-size: 20px;
}

.product {
  display: block;
}

https://jsfiddle.net/gardelin/koc5eg6v/25/