图像搜索功能

Question

Functionality:

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

我所做的：

我已经为以下品牌创建了一个数组，其次，将页面上要显示的品牌随机化。因此，当用户在品牌显示页面中时，将显示品牌图像的随机列表。

我也创建了搜索功能，但是下面的搜索功能只适用于文本搜索。

我已附上下列代码供您阅读。

​

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