用于突出显示图像的Javascript搜索函数

我在一个网站上有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

将id=“search”添加到输入名称=“search”文本框中。包括jquery。在head语句中添加以下代码。放下搜索按钮

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

---

类似的东西可能适合您：

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

---

这听起来像是您应该使用Javascript实现的功能。如果图像已经显示，而您只想突出显示它，则绝对没有理由向服务器发出新请求。是的，这正是我真正想问的，实际上，什么是最好的。我对搜索功能一无所知。谢谢，我现在可以编辑这个问题。如果图像的文件名如您所述，那么

标记的

src

attrib是否包含这些文件名，或者它是否也包含类似于

/images/public/0-1.png

的内容，这是某种路径，然后是文件名？？是的，它们在

images/0-1.png

yes这是我需要的东西。我如何包括jquery，如果我的图像存储在

images/0-1.png

pathPick Paulpro中作为答案，那又有什么关系呢。他不需要jquery。@LUKE You's的答案可能仍然是最好的，如果它对OP更有用的话。如果他想尝试学习jquery，它也可能对他非常有益。不过，我建议您在边框旁边设置一个

-3px

边距，这样图像在被选中时不会移动（也不会导致周围的元素移动）。我并不太在意这些细节。只是给他举个例子。对他来说，如果有一堆匹配的图像，最好是隐藏所有匹配的图像。我将更新我的答案以备将来查看。如果我的图像存储在路径

images/0-1.png

而不是

0-1.png

@srtstripes我的代码只执行基本的子字符串搜索，那么它仍然会搜索。基本上，它将突出显示所有图像，

input

中的当前值是

src

属性的子字符串。如果您只需在框中键入

图像

，它将突出显示所有内容。如果您只需键入

0-1

，它将突出显示像

images/0-1.png

和

images/0-11.png

这样的内容，不要介意它的工作方式。我的div叫别的名字。感谢you@srtstripes不客气，我希望你能把它调整到你喜欢的程度。如果你有任何关于它的小问题，请在这里再次发表评论。如果你有一个需要完整答案的问题，那么你可以把它作为一个单独的问题来问。祝你好运我想问一下是否可以更改onkeyup函数。我更喜欢在搜索字段中输入3个键后运行，因为3是搜索的最大长度。原因是，当我输入1键时，所有图像都会发生变化，并且会弄乱图像的css编码。你可以在这里看到原因。

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

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