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

});

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

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

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

搜索图像功能

2 个答案: