active search filter in Javascript ??

Question

I got this code from a book. and the problem is its code for img elements not having parents(my code has the anchor and list parent) so that when text is entered, the img containers set to display: none; and I'm left with all the "li" containers which keep the matched image in its original positions not top left of the "ul" list container like I'm trying. I've tried a lot of stuff, any suggestions?

 <div class="imageGalleryWrapper">
    <ul id="image-gallery" class="clearfix">
      <li><a href="images/01.jpg"><img src="images/01.jpg"></a></li>
     <li><a href="images/02.jpg"><img src="images/02.jpg"></a></li>
     <li><a href="images/03.jpg"><img src="images/03.jpg"></a></li>
     <li><a href="images/04.jpg"><img src="images/04.jpg"></a></li>
     <li><a href="images/05.jpg"><img src="images/05.jpg"></a></li>
     <li><a href="images/06.jpg"><img src="images/06.jpg"></a></li>
    </ul>
       </div>

//Image Search Filter

(function() {                             // Lives in an IIFE
  var $imgs = $('#image-gallery img');          // Get the images
  var $search = $('#searchBox');      // Get the input element
  var cache = [];                         // Create an array called cache

  $imgs.each(function() {                 // For each image
    cache.push({                          // Add an object to the cache array
      element: this,                      // This image
      text: this.alt.trim().toLowerCase() // Its alt text (lowercase trimmed)
    });
  });

  function filter() {                     // Declare filter() function
    var query = this.value.trim().toLowerCase();  // Get the query
    cache.forEach(function(img) {         // For each entry in cache pass image 
      var index = 0;                      // Set index to 0

      if (query) {                        // If there is some query text
        index = img.text.indexOf(query);  // Find if query text is in there
      }

      img.element.style.display = index === -1 ? 'none' : '';  // Show / hide
    });
  }

  if ('oninput' in $search[0]) {          // If browser supports input event
    $search.on('input', filter);          // Use input event to call filter()
  } else {                                // Otherwise
    $search.on('keyup', filter);          // Use keyup event to call filter()
  }              

}());

Answer 1 · 2016-04-28T19:46:06Z

April 28, 2016 7:46pm

This code contains references to things that aren't here. It might just be incomplete. Are you using a workspace? You could make a snapshot of your workspace and post the link to it here.

But in the meantime, a few observations:

this code apparently uses JQuery .. is JQuery loaded?
is this entire code block a self-executing anonymous function? Then that last line should probably be: })();

If these don't fix it, perhaps the rest of the code and/or the snapshot will shed some light.

Welcome to the Treehouse Community

Looking to learn something new?

Michael Williamson

Michael Williamson

active search filter in Javascript ??

1 Answer

Steven Parker

Steven Parker