用于突出显示图像的 Javascript 搜索功能

Question

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

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

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

的路径中

Answer 1

这样的东西可能对你有用:

<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>

在你的 CSS 中使用这个:

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

JsFiddle (with broken images)