是否可以使用Javascript制作一个图像搜索过滤器？_Javascript_Html_Css

是否可以使用Javascript制作一个图像搜索过滤器？

javascript html css

是否可以使用Javascript制作一个图像搜索过滤器？,javascript,html,css,Javascript,Html,Css,在这个html文件中，我想添加一个图像搜索过滤器功能。例如，有三个图像，其中包括一个火影忍者图像，一个超人图像和一个蝙蝠侠图像。所以，我想添加一些功能，比如当我键入“N或N”时，只有火影忍者图像显示隐藏其他两个，其余两个相同。我认为让图像在数组中运行是可行的，但对于图像无法做到。我看过很多youtube视频，但大多数都使用jQuery，electron，但我只想使用Javascript 文件截图和代码（HTML和CSS）如下所示： HTML: CSS: 身体{ 背景色：黑色； } .

在这个html文件中，我想添加一个图像搜索过滤器功能。例如，有三个图像，其中包括一个火影忍者图像，一个超人图像和一个蝙蝠侠图像。所以，我想添加一些功能，比如当我键入“N或N”时，只有火影忍者图像显示隐藏其他两个，其余两个相同。我认为让图像在数组中运行是可行的，但对于图像无法做到。我看过很多youtube视频，但大多数都使用jQuery，electron，但我只想使用Javascript

文件截图和代码（HTML和CSS）如下所示：

HTML:

CSS:


身体{
背景色：黑色；
}
.集装箱{
宽度：700px；
高度：400px；
边框：2倍纯黄色；
保证金：自动；
背景色：黑色；
}
输入{
边框：2倍纯色暗金色；
背景颜色：黄色；
边界半径：2px；
宽度：100px；
高度：10px；
填充：0 10px；
字体大小：较小；
颜色：黑色；
}
.搜索框{
浮动：对；
边缘顶部：5px；
右边距：5px；
}
.image\u容器
{宽度：300px；
边框：2倍纯黄色；
明确：两者皆有；
保证金：0自动；
边缘顶部：50px；
}
.image_容器img{
宽度：90px；
右边距：自动；
}

请原谅任何错误。谢谢。

简而言之，您可以使用javasscript搜索图像。但是，如何实现搜索取决于您

一种方法是使用图像的数据属性

data tags=“鸣人”

和

data tags=“蝙蝠侠”

等等

正如您在下面的示例中所看到的，我为标记创建了一个属性，并将您想要的名称添加到标记中，例如蝙蝠侠图像具有蝙蝠侠标记属性

然后在javascript中，当用户在搜索文本框中输入内容并循环浏览这些图像时，我会得到所有图像

在循环中，我首先隐藏每个图像，然后使用if语句检查图像标记是否包含搜索文本，方法是使用

indexOf

如果标记包含搜索文本，则显示图像

函数搜索（）{
var searchText=document.getElementById（“searchInput”）.value；
var images=document.queryselectoral（“.image\u container>img”）；
如果（searchText.length>0）{
images.forEach（（图像）=>{
image.classList.add（“hide”）；
if（image.dataset.tags.indexOf（searchText）>-1）{
image.classList.remove（“hide”）；
}
});
}否则{
images.forEach（（图像）=>{
image.classList.remove（“hide”）；
});
}
}

正文{
背景色：黑色；
}
.集装箱{
宽度：700px；
高度：400px；
边框：2倍纯黄色；
保证金：自动；
背景色：黑色；
}
输入{
边框：2倍纯色暗金色；
背景颜色：黄色；
边界半径：2px；
宽度：100px；
高度：10px；
填充：0 10px；
字体大小：较小；
颜色：黑色；
}
.搜索框{
浮动：对；
边缘顶部：5px；
右边距：5px；
}
.image\u容器
{宽度：300px；
边框：2倍纯黄色；
明确：两者皆有；
保证金：0自动；
边缘顶部：50px；
}
.image_容器img{
宽度：90px；
右边距：自动；
}
.隐藏{
显示：无；
}

这是我从你的评论中了解到的

var input=document.querySelector（'.search'）；
var images=document.querySelectorAll（'.image_container>img'）；
addEventListener（'keydown'，function（）{
对于（var i=0；iit就像你需要根据图像的文件名进行过滤一样？这是否意味着如果我分别保留图像的文件名，那么搜索将基于文件名？我们需要知道哪个图像是蝙蝠侠或类似于我问的任何东西。我们可以依赖文件名，以便搜索f中存在的用户查询ilename或NOTH，我应该在图像中添加id并编辑问题吗？添加的fiddle示例可能是你会在fiddle中得到意外的结果。这是因为我在将其发布到此处之前忘记保存它。立即检查谢谢，它起作用了。你能解释代码吗？我刚刚在用户键入时为文本框创建了一个事件。当它触发时，我检查d是否有任何图像url包含用户键入的值（查看循环）。如果它包含、显示或隐藏它（new RegExp（this.value）.test（images[i].src）），请解释这行代码
<body>
  <div class="container">
    <div class="searchbox_container">
    <div class="searchbox">
      <input type="text" name=" " placeholder="Search" class="search">
    </div>
  </div>
     
    <div class="image_container">
        <img src="images/naruto.png" alt="" 
         class="actionimages">
        <img src="images/batman.png" alt="" 
         class="actionimages">
        <img src="images/superman.png" alt="" 
         class="actionimages">
    </div>


  </div>
</body>

 <style>
    body {
      background-color: black;
    }

    .container {
      width: 700px;
      height: 400px;
      border: 2px solid yellow;
      margin: auto;
      background-color: black;
    }

    input {
      border: 2px solid darkgoldenrod;
      background-color: yellow;
      border-radius: 2px;
      width: 100px;
      height: 10px;
      padding: 0 10px;
      font-size: smaller;
      color: black;
    }

    .searchbox {
      float: right;
      margin-top: 5px;
      margin-right: 5px;
    }
    .image_container
    { width:300px;
      border:2px solid yellow;
      clear:both;
      margin:0 auto;
      margin-top:50px;
    }
    .image_container img{
      width:90px;
      margin-right:auto;
    }
  </style>

var input=document.querySelector('.search');
var images=document.querySelectorAll('.image_container > img');

input.addEventListener('keydown',function(){
    for(var i=0; i<images.length;i++)
  {
        if(new RegExp(this.value).test(images[i].src))
      {      
        images[i].style.display ='block'
      }
      else
      {
        images[i].style.display ='none'
      }
      console.log(images[i].src)
  }
  
})