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 alborz
.a{fill-rule:evenodd;}techdegree seal-36
alborz
Full Stack JavaScript Techdegree Graduate 30,885 Points

How to filter results based off search?

I'm trying to filter search results based off the user's input value in a search field. When they click the search button, the results should filter.

When they enter a value equal to the value of the <h3> tag, which is the name -- or the <span> tag, which is the email -- then the results should filter.

My code below:

// add an event listener to the search button
var searchButton = document.getElementsByClassName("search-button");
var searchInput = document.getElementsByClassName("search-input");
searchButton.addEventListener("click", function() {
  if (searchInput.value.toLowerCase() === $("ul li div.student-details h3").innerText || $("ul li div.student-details span").innerText) {
    var textInputted = searchInput.value.toLowerCase();
    $("ul li div.student-details h3" && "ul li div.student-details span" === textInputted).show();
    $("ul li div.student-details h3" && "ul li div.student-details span" != textInputted).hide();
  }
});

I'm getting an error in the console saying: 

script.js:76 Uncaught TypeError: searchButton.addEventListener is not a function

This is for the second project in the Full Stack JS Techdegree; filtering search for students

Thanks!

David Bath
David Bath
25,940 Points

My guess is that it's not working because getElementsByClassName returns a collection of elements. If there is only one of each of those, why don't you change those to IDs instead of class names, and then use getElementById? There seem to be other odd things in the code, but one thing at a time.

alborz
.a{fill-rule:evenodd;}techdegree seal-36
alborz
Full Stack JavaScript Techdegree Graduate 30,885 Points

David Bath I changed it to var searchInput = document.getElementById("search-input");, but search functionality is still not working; there are no errors in the console, though.

David Bath
David Bath
25,940 Points

To be honest, I can't really tell what you're trying to accomplish. It's difficult to understand without some HTML context. Also, those show and hide statements use selectors that are unlike anything I've come across. Are you sure that's valid syntax?

Alessandro Calorì
Alessandro Calorì
10,241 Points

Basically it is saying that searchButton is not an HTMLElement hence it does not provide the "addEventListener" function. Keep in mind that "getElementsByClassName" returns an array, so you need to pick a precise element. If you're using "getElementById" it returns a single HTMLElement but you HAVE to declare it in HTML.

<input type="text" id="search-input">
<button id="search-button">Search</button>

In the previous example you can get the two elements by using "getElementById". Also, the ID's MUST be unique in your HTML.

alborz
.a{fill-rule:evenodd;}techdegree seal-36
alborz
Full Stack JavaScript Techdegree Graduate 30,885 Points

David Bath Alessandro Calorì i think adding my GitHub might help you guys better: GitHub.com/amesbahi -- thanks!

2 Answers

David Bath
David Bath
25,940 Points

As Alessandro said, you should use unique IDs on the search input and the button, and use those:

var searchButton = document.getElementById("search-button");
var searchInput = document.getElementById("search-input");

or using jQuery

var searchButton = $("#search-button");
var searchInput = $("#search-input");

Your current code doesn't give any IDs. Then I would retrieve a collection of all the student items:

var students = $(".student-item");

You would then loop through that array and show/hide based on whether the name or email matches the input value. It would be easiest if you gave the H3 and span a classname so it would be easier to grab using jQuery. I'll leave the rest up to you!

Alessandro Calorì
Alessandro Calorì
10,241 Points
Alessandro Calorì
Alessandro Calorì
10,241 Points

seachButton is an array, you need to pick the first one:

searchButton[0].addEventListener( ... );

Moreover, if you use jQuery you'd better use it also for manipulating the DOM for inserting the search field and button so that you would get a reference to those elements and make less queries to the DOM.