Javascript搜索功能以突出显示图像 [英] Javascript Search function to highlight image

问题描述

我在一个网站上有 100 张图片，我希望能够在搜索框中搜索图片的文件名.之后，图像在找到时突出显示.文件被命名为 0-1.png、0-2.png 等.所以如果我输入 0-1 来突出显示图像 0-1.png.这是我目前所拥有的.

<input type="text" name="search" size="3" maxlength="3"><input type="submit" value="search"></表单>

如何创建一个 Javascript 函数来搜索图像并突出显示它?图像也存储在 images/0-1.png

之类的路径中

解决方案

这样的事情可能对你有用:

<div id="图片"><img src="0-1.png"/><img src="0-2.png"/>...

<脚本>(功能(){var input = document.getElementById('search');var images = document.getElementById('images').getElementsByTagName('img');input.onkeyup = 函数(){for(var i = images.length; i--;){图像[i].className =图像[i].src.indexOf(this.value) >0 ?'强调' :'';}};})();

在你的 CSS 中使用这个:

img.highlight {边框:5px 实心#F0F；边距:-5px；}

JsFiddle(带有损坏的图像)

I have 100 images on a website, and I want to be able to search in the search box the file name of the image. After that for the image to be highlighted when found. Files are named 0-1.png, 0-2.png, etc. So if I type 0-1 to highlight image 0-1.png. Here is what I have so far.

<form  action='' method='get'>
<input type="text" name="search" size="3" maxlength="3">
<input type="submit" value="search">
</form>

How do I create a Javascript function to search for image and highlight it? Also images are stored in path like images/0-1.png

解决方案

Something like this may work for you:

<input type="text" id="search" />
<div id="images">
  <img src="0-1.png" />
  <img src="0-2.png" />
  ...
</div>
<script>
  (function(){
    var input = document.getElementById('search');
    var images = document.getElementById('images').getElementsByTagName('img');

    input.onkeyup = function(){
      for(var i = images.length; i--;){
          images[i].className = 
            images[i].src.indexOf(this.value) > 0 ?
            'highlight' :
            '';
      }       
   };
 })();
</script>

With this in your CSS:

img.highlight {
    border: 5px solid #F0F;
    margin: -5px;
}

JsFiddle (with broken images)

这篇关于Javascript搜索功能以突出显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！