在网页上设置搜索功能

Question

好的，所以我已经设法在我的网页中拼凑出一些在搜索功能方面有效的东西，但是如果我搜索“Amethyst”，它也会将“Placeholder1”分组到搜索中.

这里可能遗漏了一些非常明显的东西，但我会在这里放一小段代码，不足以重新创建，但它相当简单。

var input = document.getElementById("myInput");
input.addEventListener("input", myFunction);

function myFunction(e) {
  var filter = e.target.value.toUpperCase();

  var list = document.getElementById("products");
  var divs = list.getElementsByTagName("div");
  for (var i = 0; i < divs.length; i++) {
    var a = divs[i].getElementsByTagName("a")[0];

    if (a) {
      if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
        divs[i].style.display = "";
      } else {
        divs[i].style.display = "none";
      }
    }
  }

}

<input type="text" id="myInput" placeholder="Search" onkeyup="myFunction()" style="font-size:20px; padding-left: 15px;">



<div id="products" class=" w3-row w3-grayscale" style="width:100%">
      
 <div class="w3-col l3 s6">
       <a href="#"><div class="w3-container">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\amethyst1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
          </div>
        </div>
        <p>Amethyst<br>£45.00</p>
      </div></a>
     
      <a href="#"><div class="w3-container">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
            <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
          </div>
        </div>
        <p>Placeholder1<br>£0.00</p>
      </div></a>
</div>

注意：这段代码不足以复制任何内容，但我相当确定问题出在这段代码中。

如果我遗漏了您需要帮助的任何其他信息，请告诉我。谢谢！

Answer 1

这里的主要问题是您试图获取未定义的 e.target.value.toUpperCase() 的值。您真正想要的是 myInput 的大写值，因为这是您希望在 HTML 内容中找到的值。

这是使用 querySelector 与现有 HTML 内容一起使用的脚本重构（以及更高效的 for 循环）。此代码只会查看包含您的描述的段落标记。

<script>
var input = document.getElementById("myInput");
input.addEventListener("input", myFunction);

function myFunction() {

  var filter = document.getElementById("myInput").value.toUpperCase();
  
  var paragraphs = document.querySelectorAll("#products div a p")
  
  for (let i=0, p; p = paragraphs[i]; i++)
  {
     if (p.innerHTML.toUpperCase().indexOf(filter) > -1)
     {
        p.parentElement.parentElement.style.display = "block";
    }
    else
    {
        p.parentElement.parentElement.style.display = "none";
    }
  }
}
</script>

在网页上设置搜索功能

Setting up a search function on a webpage

javascript

html

search