creating a live image search with javascript and Jquery.

Question

How would you write this javascript code so that the list containers display goes to none when index is equal to -1 ??

<div id="image-gallery" class="imageGalleryWrapper">
    <ul id="image-gallery" class="clearfix">
      <li class="firstImage"><a href="images/01.jpg"><img src="images/01.jpg" class="firstImage" alt="Loved the hay bales in this open field against the blue sky"></a></li>
      <li><a href="images/02.jpg"><img src="images/02.jpg" alt="Came across the still lake at the foot of beautiful mountains"></a></li>
      <li ><a href="images/03.jpg" ><img src="images/03.jpg" alt="Green praries have always been a favorite and with the small trees mixed in"></a></li>
      <li class="imgMargin" ><a href="images/04.jpg"><img src="images/04.jpg" alt="Cold but beautiful with snow capped mountains and floating ice on this lake scene"></a></li>
      <li><a href="images/05.jpg"><img src="images/05.jpg" alt="Amazing this sky behind these vibrant red cliffs,  couln't get enough of the moutains"></a></li>
      <li><a href="images/06.jpg"><img src="images/06.jpg" alt="Kind of a foggy day just outside of the forest and a bridge to tie it in"></a></li>
      <li><a href="images/07.jpg"><img src="images/07.jpg" alt="Farm field surrounded by deep green"></a></li>
      <li class="imgMargin"><a href="images/08.jpg"><img src="images/08.jpg"  alt="Windy sand dunes on this beach!"></a></li>
      <li ><a href="images/09.jpg"><img src="images/09.jpg" alt="Quiet country road nestled in by the trees"></a></li>
      <li><a href="images/10.jpg"><img src="images/10.jpg" alt="Ocean beating against the cliffs as the sun came up"></a></li>
      <li><a href="images/11.jpg"><img src="images/11.jpg" alt="Mountain cave overlooking a muddy river"></a></li>
      <li class="imgMargin lastImage" ><a href="images/12.jpg"><img src="images/12.jpg"  alt="Wild lavender and snow capped mountains bring back the memories"></a></li>
    </ul>
    </div>

```javascript

(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-05-22T16:29:46Z

May 22, 2016 4:29pm

Oops, I missed the part about "list container".

So, using my JQuery-ized replacement, and observing that the image is inside an anchor (a) which itself is insde the list item, we can just change the toggle to affect the parent of the parent of the item, instead of the item (img) itself:

      $(img.element).parent().parent().toggle(index != -1);

Answer 2 · 2016-05-22T15:35:23Z

May 22, 2016 3:35pm

Isn't that what this line does already?

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

But since you're using JQuery, I'm wondering why you didn't just do this:

      $(img.element).toggle(index != -1);

Welcome to the Treehouse Community

Looking to learn something new?

Michael Williamson

Michael Williamson

creating a live image search with javascript and Jquery.

Taran Albury

Taran Albury

2 Answers

Steven Parker

Steven Parker

Michael Williamson

Michael Williamson

Steven Parker

Steven Parker

Steven Parker

Steven Parker

Michael Williamson

Michael Williamson

Steven Parker

Steven Parker