CODEWITHSUNDEEP
javascriptjquerysearchjquery-events
Luke
Luke

Reputation: 990

Search Function for Images

Functionality:

Have listed a set of images of brands. Users are able to do a search and the requested searched brand image will be displayed in the container.

What I have done:

I have created an array for the following brands and secondly, have randomised the brands on page load to be displayed. Hence, when the user is in the brand display page, the randomised list of brand image will be displayed.

I have also created the Search function, however the following search function is only applicable for text search.

I have attached the following code for your perusal.

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

Issue:

The current Search functional method that I have is applicable if I have a container list of text. However, at this point in time, all I have are images.

I would like to ask, how is it possible for me to create a Search Function that is applicable to Search for the relevant images without the image text?

Meaning:

If I were to have 3 images: 1.) apple 2.) Banana 3.) watermelon. And in my search Box, if I were to type apple, the corresponding image of apple will be displayed and if I were to type gibberish in the search box, nothing will be displayed.

Upvotes: 0

Views: 70

Answers (2)

gurvinder372
gurvinder372

Reputation: 68393

Change your event handler on SearchField to be

$("#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 any part of userinput matches the image name, then update the if condition to

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

Upvotes: 1

KiiroSora09
KiiroSora09

Reputation: 2287

Maybe you could try the code below, this will search images with filenames that contain the user input.

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

});

Upvotes: 1

Related Questions