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 =＆＃34;搜索＆＃34;输入您的输入名称=＆＃34;搜索＆＃34;文本框。包括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/

Javascript搜索功能突出显示图像

2 个答案: