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)

Answer 2

将 id="search" 添加到您的输入 name="search" 文本框。包括 jQuery。在您的 head 语句中添加以下代码。放下搜索按钮

<script>
$(function() { 
    $('#search').keyup(function() {
        $('img')                     
            .removeClass('highlight')
            .filter('img[src*="'+$(this).val()+'"]')
            .addClass('highlight'); 
    });
});
</script>

CSS：

img { border: 3px solid transparent; }
img.highlight { border-color: yellow; }

http://jsfiddle.net/fstreamz/8kCxw/3/