图像搜索功能

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.) 西瓜。而在我的搜索框中，如果我输入苹果，就会显示苹果的对应图像，如果我在搜索框中输入乱码，则不会显示任何内容。

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);
  });

});

Answer 2

将SearchField 上的事件处理程序更改为

$("#SearchField").keyup(function() {
  var userInput = $(this).val();
  console.log("here");
  $( "#list img" ).hide(); //first hide all images since when user types gibberish nothing should be visible
  $( "#list img" ).each(function(){
      var name = $(this).attr("src").split("/").pop().split(".")[0];
      if( name == userInput ) { $(this).show(); } //show if the name of image is same as user-input
  });
});

如果用户输入的任何部分与图像名称匹配，则将 if 条件更新为

      if( name.indexOf( userInput ) != -1 ) { $(this).show(); } //show if the any part of name of image is matching user-input