是的,所以我设法拼凑了一些在我的网页中搜索功能方面有效的东西,但是如果我搜索"Amethyst",它也会将"Placeholder 1"分组到搜索中.
这里可能缺少一些非常明显的东西,但我会在这里放一小段代码,不足以重新创建,但这相当简单.
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>
注意:这不足以复制任何东西,但我相当确定问题在于这段代码.
如果你还有什么需要帮助的地方我忽略了,请告诉我.谢谢