的Javascript搜索过滤器除去页面元素

我的大脑被卡住了，我不能让下面的代码工作。的Javascript搜索过滤器除去页面元素

什么我是在一个完整的链接网站的顶部的搜索栏，我想筛选出的链接，在酒吧的用户类型。

这里是网页的一个片段：

<input type="text" id="resourceSearch" onkeyup="resourceFilter" placeholder="Filter resources by name.."> 

<div id="resourceTiles" class="resource-tiles"> 

    <a class="resource-tile-container" target="_blank" href="http://hostname/cacti/"> 
     <div class="resource-tile-icon-container"> 
      <img src="/media/tile-icons/analytics.png"> 
     </div> 
     <div class="resource-tile-title-container"> 
      <p>Cacti Traffic Graphing</p> 
     </div> 
    </a> 

</div> 

<script type="text/javascript" src="scripts/script.js"></script>

和JavaScript我试图使用方法：

function resourceFilter() { 
    var input, filter, tiles, tile, resource, i; 
    input = document.getElementById("resourceSearch"); 
    filter = input.value.toUpperCase(); 
    tiles = document.getElementById("resourceTiles"); 
    tile = tiles.getElementsByTagName("a"); 
    for (i = 0; i < tile.length; i++) { 
     resource = tile[i].getElementsByTagName("p")[0]; 
     if (resource) { 
      if (resource.innerHTML.toUpperCase().indexOf(filter) > -1) { 
       tile[i].style.display = ""; 
      } else { 
       tile[i].style.display = "none"; 
      } 
     }  
    } 
}

我是新来的Javascript并试图重新利用一些代码我在其他地方找到了，但我不知道如何让它做到我想要的。

我希望脚本搜索“resourceTiles”div中的所有'a'标签，并通过添加display：none样式来删除'p'标签中链接名称不匹配的拼贴。

这是接近这一目标的最佳方式是什么？

来源

2017-09-04 Taylor V

小心使用函数内部的全局变量，因为你可能把事情搞砸在其他地方。阅读关于在函数内部使用'var'的信息。 – yezzz

要触发功能resourceFilter，则需要对其进行格式化作为HTML事件处理onkeyup的功能。除此之外，它似乎工作正常。所以你的html应该是：

<input type="text" id="resourceSearch" onkeyup="resourceFilter()" placeholder="Filter resources by name..">

来源

2017-09-04 23:13:24

谢谢！我一直在敲打我的头靠在我的办公桌上了一整天试图找出什么我做错了，我完全忽略了我的HTML。 –

的Javascript搜索过滤器除去页面元素

回答

相关问题