javascript - 图片搜索功能

Question

功能:

列出了一组品牌图片。用户可以进行搜索，所请求的搜索品牌图像将显示在容器中。

我做了什么:

我为以下品牌创建了一个数组，其次，在页面加载时随机显示要显示的品牌。这样，当用户进入品牌展示页面时，就会显示随机的品牌形象列表。

我还创建了搜索功能，但是以下搜索功能仅适用于文本搜索。

我附上了以下代码供您阅读。

//Brand Array
var BrandNameArray = ["...","....."]

$(function() {
  //Auto populate into brand container once randomised for each Brand image
  for (i = 0; i < $('#list').find('img').length; i++) {
    //To Set random Brand
    var random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length);
    //Assign Variable to generate random Brands
    var Brand = BrandNameArray[random_BrandIndex];
    $('#Brand_' + (i + 1)).attr('src', Brand);
    $('#Brand_' + (i + 1)).show();
    console.log(Brand);
  }
});

//Search Function
$("#SearchField").keyup(function() {
  var userInput = $(this).val();
  console.log("here");
  $("#list div").map(function(index, value) {
    $(value).toggle($(value).text().toLowerCase().indexOf(userInput) >= 0);
  });
});

<div id="ChooseBrand" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display:none; z-index=3; top:0px; left:0px;">
  <img id="Main" src="lib/img/PAGE03/Background.png" />
  <input type="text" id="SearchField" style="position:absolute; top:190px; left:660px; height:40px; width:600px; outline=0px; border: 0; font-size:25px; font-family:'CenturyGothic'; background: transparent; z-index:100;" autofocus src="lib/img/transparent.png">
  <div class="Container">
    <div id="list" class="innerScroll">
      <!--1st Row-->
      <img id="Brand_1" style="width:284px; height:140px; top:0px; left:0px; border:0px; outline:0px" onclick="selectBrand('1');">
      <img id="Brand_2" style="width:284px; height:140px; top:0px; left:330px; border:0px;" onclick="selectBrand('2');">
      <img id="Brand_3" style="width:284px; height:140px; top:0px; left:650px; border:0px;" onclick="selectBrand('3');">
      <img id="Brand_4" style="width:284px; height:140px; top:0px; left:965px; border:0px;" onclick="selectBrand('4');">

      <!--2nd Row-->
      <img id="Brand_5" style="width:284px; height:140px; top:140px; left:0px; border:0px;" onclick="selectBrand('5');">
      <img id="Brand_6" style="width:284px; height:140px; top:140px; left:330px; border:0px;" onclick="selectBrand('6');">
      <img id="Brand_7" style="width:284px; height:140px; top:140px; left:650px; border:0px;" onclick="selectBrand('7');">
      <img id="Brand_8" style="width:284px; height:140px; top:140px; left:965px; border:0px;" onclick="selectBrand('8');">

      <!--3rd Row-->
      <img id="Brand_9" style="width:284px; height:140px; top:280px; left:0px; border:0px;" onclick="selectBrand('9');">
      <img id="Brand_10" style="width:284px; height:140px; top:280px; left:330px; border:0px;" onclick="selectBrand('10');">
      <img id="Brand_11" style="width:284px; height:140px; top:280px; left:650px; border:0px;" onclick="selectBrand('11');">
      <img id="Brand_12" style="width:284px; height:140px; top:280px; left:965px; border:0px;" onclick="selectBrand('12');">

    </div>
  </div>
</div>

问题:

如果我有文本容器列表，则当前的搜索功能方法适用。然而，此时此刻，我所拥有的只是图像。

我想问一下，我如何创建一个搜索功能，可以在没有图片文字的情况下搜索相关图片？

含义:

如果我有 3 张图片:1.) 苹果 2.) 香蕉 3.) 西瓜。在我的搜索框中，如果我输入 apple，则会显示相应的 apple 图像，如果我在搜索框中输入乱码，则不会显示任何内容。

Answer 1

也许您可以尝试下面的代码，这将搜索文件名包含用户输入的图像。

$("#SearchField").keyup(function() {
  var userInput = $(this).val().toLowerCase();

  console.log("here");

  $("#list img").each(function() {
    var
    $this = $(this),
    imageName = $this.attr('src').split('/'); // Split src by '/'

    // Get last part (filename)
    imageName = imageName.pop();

    // Remove extension
    imageName = imageName.split('.')[0];

    // Show images with matching filename
    $this.toggle(imageName.indexOf(userInput) >= 0);
  });

});