Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

What is the mistake in my code, I can not work it out?

Hello,

I am making a search filter and have this error but do not know why it is showing, can anyone explain it to me so I can fix my code? Thank you for your help.

Uncaught TypeError: Cannot read property 'indexOf' of undefined

```<div id="photo-container" class="data-list">
 <ul>
    <li data-keywords="dry hill"><a href="Photos/01.jpg"><img     src="Photos/Thumbnails/01.jpg" alt="Photo of a dry hill with blue skys.  This image was captured at the end of Summer in the region of Hawkes Bay." title="Dry Hill" class="photo photo1">
           </a></li>
         <li data-keywords="lake blue sky"><a href="Photos/02.jpg"><img src="Photos/Thumbnails/02.jpg" alt="Photo of a lake with blue sky.  This image was taken in the mid morning of the Lakes District. " title="Lake" class="photo">
             </a></li>
         <li data-keywords="green fields"><a href="Photos/03.jpg"><img src="Photos/Thumbnails/03.jpg" alt="Green Fields is an image captured in the lush Southland area. " title="Photo Three" class="Green Fields">
             </a></li>

 </ul>
</div><!--closing photo-container-->```


 ```$(document).ready(function(){

   $("#search").keyup(function(){

    var current_query = $("#search").val();

    if(current_query != ""){
     $("#photo-container").hide();

     $("#photo-container li ").each(function(){

         var current_keyword = $(this).parent().attr("data-keywords");

        if (current_keyword.indexOf(current_query) >=0){
            $(this).show();
        } 
          });
    } else {
            $("#photo-container li ").show();
        }

});

});

2 Answers

Henrik Christensen
seal-mask
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points
Henrik Christensen
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points

You keep using $("#search") but I don't see any element with the id = search.

var current_query = $("#search").val();

Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

Sorry, I should have included that section of my html...

      <header id="search-bar">
         <input id="search" type="text" placeholder="Search">
    </header>

     <div id="photo-container" class="data-list">
         <ul>
Tracy Excell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points
Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

Solved the problem, thank you for your help I missed a space and removed the parent:

var current_keyword = $(this).attr("data-keywords");

    if (current_keyword.indexOf(current_query) >= 0){
        $(this).show();