Javascript 图像搜索功能

功能：

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

我所做的：

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

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

我已附上以下代码供您阅读

//品牌数组
var BrandNameArray=[“…”，“…”]
$（函数（）{
//自动填充到品牌容器中，对每个品牌图像随机一次
对于（i=0；i<$（'#list'）。查找（'img'）。长度；i++）{
//设置随机品牌
var random_BrandIndex=Math.floor（Math.random（）*BrandNameArray.length）；
//分配变量以生成随机品牌
var Brand=BrandNameArray[random_BrandIndex]；
$（‘品牌’+（i+1））.attr（‘src’，品牌）；
$（“#品牌+（i+1））.show（）；
控制台日志（品牌）；
}
});
//搜索功能
$（“#SearchField”）.keyup（函数（）{
var userInput=$（this.val（）；
console.log（“此处”）；
$（“#list div”）.map（函数（索引，值）{
$（值）.toggle（$（值）.text（）.toLowerCase（）.indexOf（用户输入）>=0）；
});
});
也许您可以尝试下面的代码，这将搜索包含用户输入的文件名的图像

$("#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);
  });

});

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

$("#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);
  });

});

将
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

将
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

这是否意味着你想搜索图像
src
，而不是容器文本？@RejithRKrishnan，这意味着如果我有3张图像：1.）苹果2.）香蕉3.）西瓜。在我的搜索框中，如果我键入apple，则会显示相应的apple图像，如果我在搜索框中键入gibberish，则不会显示任何内容。因此，是的。您的图像没有src属性，如何检查图像是香蕉还是苹果？@gurvinder372这是一个示例：对于src属性，它将是：lib/img/PAGE03/Brands/apple.png、lib/img/PAGE03/Brands/banana.png、lib/img/PAGE03/Brands/西瓜.png。并且在数组中指定了以下src属性。这是否意味着您要搜索图像
src
，而不是容器文本？@RejithRKrishnan，这意味着如果我有3个图像：1.）苹果2.）香蕉3.）西瓜。在我的搜索框中，如果我键入apple，则会显示相应的apple图像，如果我在搜索框中键入gibberish，则不会显示任何内容。因此，是的。您的图像没有src属性，如何检查图像是香蕉还是苹果？@gurvinder372这是一个示例：对于src属性，它将是：lib/img/PAGE03/Brands/apple.png、lib/img/PAGE03/Brands/banana.png、lib/img/PAGE03/Brands/西瓜.png。并且在数组中指定以下src属性。