时间戳

首页 > 解决方案 > 使用 Javascript 搜索过滤器

javascript - 使用 Javascript 搜索过滤器

问题描述

我正在尝试构建一个基本的搜索过滤器，您可以在其中搜索并在屏幕上显示某个图像，并且我正在尝试使用 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';
}

标签： javascriptjquery

解决方案

var input = document.getElementById('myInput');

input.onkeyup = function () {
    var filter = input.value.toUpperCase();
    var lis = document.getElementsByTagName('li');
    for (var i = 0; i < lis.length; i++) {
        var name = lis[i].className; // takes the classname
        if (name.toUpperCase().indexOf(filter) >= 0) //Changed this part
            lis[i].style.display = 'list-item';
        else
            lis[i].style.display = 'none';
    }
}

indexOf如果没有找到，方法返回 -1，否则它将大于或等于 0。

推荐阅读