基于 ALT 标记的图像的 Jquery 搜索过滤器

Question

我正在为基于 alt 标签的图片库构建搜索页面。画廊最终将拥有超过 3000 张照片。仅显示与搜索栏中的文本匹配的图像。页面会在您键入时更新，反映当前匹配。到目前为止，我有一个很好的工作模型，这要归功于我在这里找到的几乎解决相同任务的帖子。我需要我的搜索过滤器对大小写和空格不敏感。我当前的代码几乎按预期工作，但有一个小问题。来自搜索栏的输入不会显示 alt 标记中数字字符的任何匹配项。

$('img').hide();

$("#myinput").keyup(function() {
  var val = $.trim(this.value);
  val = val.split(" ").join("\\ ");
  if (val === "")
    $('img').hide();
  else {
    $('img').hide();
    $("img[alt*=" + val + " i]").show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="myinput" name="search" placeholder="search..." style="width:200px; height: 40px; border-radius: 4px; font-size: 18px;"><br>
<div id="images">
  <a href="https://example.com"><img src="https://picsum.photos/id/100/200/300" alt="Beach 194888" width=130></a>
  <a href="https://example.com"><img src="https://picsum.photos/id/1002/200/300" alt="Earth 2069" width=130></a>
  <a href="https://example.com"><img src="https://picsum.photos/id/1003/200/300" alt="Bambi" width=130></a>
  <a href="https://example.com"><img src="https://picsum.photos/id/1015/200/300" alt="River" width=130></a>
  <a href="https://example.com"><img src="https://picsum.photos/id/1027/200/300" alt="Roksolana Zasiadko" width=130></a>

</div>

Answer 1

这将过滤有或没有数字的不区分大小写的输入

const $img = $("#images img");
$("#myinput").on("input",function() {
  $img.hide();
  const val = this.value.trim().toLowerCase();  
  if (val === "") return; 
  $img.filter(function() { return this.alt.toLowerCase().includes(val)  }).show()
});

#images img { display: none }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="myinput" name="search" placeholder="search..." style="width:200px; height: 40px; border-radius: 4px; font-size: 18px;"><br>
<div id="images">
  <a href="https://example.com"><img src="https://picsum.photos/id/100/200/300" alt="Beach 194888" width=130></a>
  <a href="https://example.com"><img src="https://picsum.photos/id/1002/200/300" alt="Earth 2069" width=130></a>
  <a href="https://example.com"><img src="https://picsum.photos/id/1003/200/300" alt="Bambi" width=130></a>
  <a href="https://example.com"><img src="https://picsum.photos/id/1015/200/300" alt="River" width=130></a>
  <a href="https://example.com"><img src="https://picsum.photos/id/1027/200/300" alt="Roksolana Zasiadko" width=130></a>

</div>