Have problems with my real time search box, any suggestions?

Question

I created a search box that has to filter out images in real time based on their caption. I wrote the code, but I don't know where I went wrong. It will post the html and javascript. Any help will be appreciated.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Interactive Photo Gallery</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!---CSS--->
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/normalize.min.css">

    <link rel="stylesheet" href="css/main.css" type="text/css">
  </head>
    <body>
      <div class="searchbar">
        <input type="text" id="input" placeholder="search">
      <ul class="images">
        <li class="mix"><a href="img/01.jpg"><img src="img/01.jpg" width="100" alt="Hay Bales. I love hay bales. Took this snap on a drive through the countryside past some straw fields."></a></li>        
        <li class="mix"><a href="img/02.jpg"><img src="img/02.jpg" width="100" alt="Lake. The lake was so calm today. We had a great view of the snow on the mountains from here."></a></li>        
        <li class="mix"><a href="img/03.jpg"><img src="img/03.jpg" width="100" alt="Canyon. I hiked to the top of the mountain and got this picture of the canyon and trees below."></a></li>
        <li class="mix"><a href="img/04.jpg"><img src="img/04.jpg" width="100" alt="Iceberg. It was amazing to see an iceberg up close, it was so cold but didn’t snow today."></a></li>
        <li class="mix"><a href="img/05.jpg"><img src="img/05.jpg" width="100" alt="Desert. The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons."></a></li>
        <li class="mix"><a href="img/06.jpg"><img src="img/06.jpg" width="100" alt="Fall. Fall is coming, I love when the leaves on the trees start to change color."></a></li>
        <li class="mix"><a href="img/07.jpg"><img src="img/07.jpg" width="100" alt="Plantation. I drove past this plantation yesterday, everything is so green!"></a></li>
        <li class="mix"><a href="img/08.jpg"><img src="img/08.jpg" width="100" alt="Dunes. My summer vacation to the Oregon Coast. I love the sandy dunes!"></a></li>
        <li class="mix"><a href="img/09.jpg"><img src="img/09.jpg" width="100" alt="Countryside Lane. We enjoyed a quiet stroll down this countryside lane."></a></li>
        <li class="mix"><a href="img/10.jpg"><img src="img/10.jpg"  width="100" alt="Sunset. Sunset at the coast! The sky turned a lovely shade of orange."></a></li>
        <li class="mix"><a href="img/11.jpg"><img src="img/11.jpg" width="100" alt="Cave. I did a tour of a cave today and the view of the landscape below was breathtaking."></a></li>
        <li class="mix"><a href="img/12.jpg"><img src="img/12.jpg" width="100" alt="Bluebells. I walked through this meadow of bluebells and got a good view of the snow on the mountain before the fog came in."></a></li>
      </ul>
      </div>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/search.js" type="text/javascript" charset="utf-8"></script>
      <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
  </body>
</html>

The following is the code for the search box which I am having trouble with. This is the line that I am having trouble with "$matching = $matching.not(this);"

var inputText;
var $matching;

$("#input").keyup(function() {
  //delay function 
  .delay(function(){
    inputText = $("#input").val().toLowerCase();

    //check to see if input field is empty
    if ((inputText.length) > 0) {
      $('.mix').each(function() {
        $this = $("this");

        //add item to be filtered out if input text matches items inside the list
        if ($(this).children('$caption').text().toLowerCase().match(inputText)) {
          $matching = $matching.add(this);
        } else {
          //removes any previously matched item
          $matching = $matching.not(this);
        }
      });

      $(".searchbar").show('filter', $matching);
    } else {

      //resets the filter to show all items if input is empty
      $(".searchbar").end();
    }
  }, 200);
});

The following code is a javascript file that is intended to make an overlay when the images are click on. I am including it because I am using a variable that get appended to the overlay.

var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $caption = $("<p class='caption'></p>");
var $leftArrow = $("<div id='leftArrow'><a href='#'><</a></div>");
var $rightArrow = $("<div id='rightArrow'><a href='#'>></a></div>");
var $closeLightbox = $("<div id='closeLightbox'></div><div style='clear:both'></div>");

//An image to overlay
$overlay.append($image);

$image.before($closeLightbox);
$image.before($leftArrow);
$image.after($rightArrow);

//add caption
$overlay.append($caption);

//add the overlay
$("body").append($overlay);

//Capture the click event on a link to an image
$(".images a").click(function(event) {
  event.preventDefault();

  getCurrentImage(this);

  //Show the overlay.
  $overlay.show();
});

$leftArrow.click(function(){
  getPrevImage();
});

$rightArrow.click(function(){
  getNextImage();
});

function getCurrentImage (currentImage) {  
  thisImage = currentImage;
  var imageLocation = $(currentImage).attr("href");

  //Update overlay with the image linked in the link
  $image.attr("src", imageLocation);

  //Get child's alt attribute and set caption
  var captionText = $(currentImage).children("img").attr("alt");
  $caption.text(captionText);
}

function getPrevImage() {
  imageParent = $(thisImage).parent().prev();
  if(imageParent.length!=0){
      thisImage = $(imageParent).children("a");
    // imageLocation = $(thisImage).attr("href");
    // $image.attr("src", imageLocation);
  }
  getCurrentImage(thisImage);    
}

function getNextImage() {
  imageParent = $(thisImage).parent().next();
  if(imageParent.length!=0){
    thisImage = $(imageParent).children("a");
    // imageLocation = $(thisImage).attr("href");
    // $image.attr("src", imageLocation);
  }
  getCurrentImage(thisImage);
}

//When overlay is clicked
$closeLightbox.click(function(){
  //Hide the overlay
  $overlay.hide();
});

I created two different javascript files because when I put the two different javascript files the codes doesn't work.

Answer 1 · 2016-11-13T15:48:31Z

November 13, 2016 3:48pm

Hi Carlos,

Wow, you did a lot of work1 To the best of my knowledge, your HTML looks good.

Regarding the JavaScript. Use '!==' to compare with '0' in two locations. I think you need to define your variables thisImage and imageParent.

That is all that I can find. There may be more. Try it and see what happens.

Happy Coding!

Mark

Welcome to the Treehouse Community

Looking to learn something new?

Carlos Arroyo

Carlos Arroyo

Have problems with my real time search box, any suggestions?

1 Answer

Mark Casavantes

Mark Casavantes