在网页上设置搜索功能

Question

对，所以我已经设法拼凑了一些东西，在我的网页搜索功能方面的工作，然而，假设我搜索"紫水晶"它将分组"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:UsersHarrison GobeyDownloadsDiceamethyst1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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>