我正在尝试构建一个基本的搜索过滤器，您可以在其中搜索并在屏幕上显示某个图像，我正在尝试使用 javascript 或简单的 jquery 执行此操作，我似乎无法使搜索工作，我也想知道是否可能根据类名进行搜索？
这是我的 HTML 代码
<form onkeyup "function()" >
<input type="search" id = "myInput" placeholder="Search.." name="search" >
</form>
<ul id ="myUL">
<li class="SupernaturalCookbook"><a href="SupernaturalCookbookProductPage.html"><img src="Images/SupernaturalCookbookCard.jpg" alt="SupernaturalCookbook"></a></li>
<li class="MarkOfAthena"><a href="MarkOfAthena.html"><img src="Images/MarkOfAthenaCard.jpg" alt="MarkOfAthena"></a></li>
<li class="Instinct"><a href="Instinct.html"><img src="Images/InstinctCard.jpg" alt="Instinct"></a></li>
<li class="CaminoIsland"><a href="CaminoIsland.html"><img src="Images/CaminoIslandCard.jpg" alt="caminoisland"></a></li>
<li class="TheLuckyOne"><a href="TheLuckyOne.html"><img src="Images/TheLuckyOneCard.jpg" alt="theluckyone"></a></li>
<li class="TheWhistler"><a href="TheWhistler.html"><img src="Images/TheWhistlerCard.jpg" alt="thewhistler"></a></li>
<li class="Greenlights"><a href="Greenlights.html"><img src="Images/GreenlightsCard.jpg" alt="greenlights"></a></li>
<li class="SeaOfMonsters"><a href="SeaOfMonsters.html"><img src="Images/SeaOfMonstersCard.jpg" alt="seaofmonsters"></a></li>
<li class="SerpentShadows"><a href="SerpentShadows.html"><img src="Images/SerpentShadowsCard.jpg" alt="serpentshadows"></a></li>
<li class="FromCrookToCook"><a href="FromCrookToCook.html"><img src="Images/FromCrookToCookCard.jpg" alt="fromcrooktocook"></a></li>
</ul>
这是我的 Javascript 代码：
var input = document.getElementById('myInput');
input.onkeyup = function () {
var filter = myInput.value.toUpperCase();
var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
var name = lis[i].getElementsByClassName('class')[0].innerHTML;
if (name.toUpperCase().indexOf(filter) == 0)
lis[i].style.display = 'list-item';
else
lis[i].style.display = 'none';
}
除了其他人添加的内容外，请记住，onkeyup只有在有人释放密钥时才会触发。但是，还有其他方法可以更改输入字段的输入，例如剪切、粘贴、清除等。为确保您已涵盖所有方面，您可以将代码包装在命名函数中并将其绑定到以下事件
function search_images(){
///code goes here
}
input.onkeyup = search_images
input.onchange = search_images
input.onpaste = search_images
input.oncut = search_images
input.oninput = search_images
此外，如果输入为空，请务必重置过滤器。另一种解决方案如下：-
function search_images() {
let filter = this.value.toUpperCase();
let lis = Array.from(document.getElementsByTagName('li'));
if (filter.length > 0) {
lis.forEach(li => {
if (Array.from(li.classList).join(" ").toUpperCase().indexOf(filter) >= 0) {
li.style.display = "list-item"
} else {
li.style.display = "none"
}
})
} else {
lis.forEach(li => li.style.display = "list-item")
}
}
const input = document.getElementById('myInput');
input.onkeyup = search_images
input.onchange = search_images
input.onpaste = search_images
input.oncut = search_images
input.oninput = search_images<form>
<input type="search" id="myInput" placeholder="Search.." name="search">
</form>
<ul id="myUL">
<li class="SupernaturalCookbook">
<a href="SupernaturalCookbookProductPage.html"> <img src="Images/SupernaturalCookbookCard.jpg" alt="SupernaturalCookbook"></a>
</li>
<li class="MarkOfAthena">
<a href="MarkOfAthena.html"><img src="Images/MarkOfAthenaCard.jpg" alt="MarkOfAthena"></a>
</li>
<li class="Instinct">
<a href="Instinct.html"><img src="Images/InstinctCard.jpg" alt="Instinct"></a>
</li>
<li class="CaminoIsland">
<a href="CaminoIsland.html"><img src="Images/CaminoIslandCard.jpg" alt="caminoisland"></a>
</li>
<li class="TheLuckyOne">
<a href="TheLuckyOne.html"><img src="Images/TheLuckyOneCard.jpg" alt="theluckyone"></a>
</li>
<li class="TheWhistler">
<a href="TheWhistler.html"><img src="Images/TheWhistlerCard.jpg" alt="thewhistler"></a>
</li>
<li class="Greenlights">
<a href="Greenlights.html"><img src="Images/GreenlightsCard.jpg" alt="greenlights"></a>
</li>
<li class="SeaOfMonsters">
<a href="SeaOfMonsters.html"><img src="Images/SeaOfMonstersCard.jpg" alt="seaofmonsters"></a>
</li>
<li class="SerpentShadows">
<a href="SerpentShadows.html"><img src="Images/SerpentShadowsCard.jpg" alt="serpentshadows"></a>
</li>
<li class="FromCrookToCook">
<a href="FromCrookToCook.html"><img src="Images/FromCrookToCookCard.jpg" alt="fromcrooktocook"></a>
</li>
</ul>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句