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 replace添加到以下模板：


    <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()，并提供product-container类作为参数。

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/

简单页面搜索中的代码问题

1 个答案: