Dynamic search function to show / hide divs

Question

This is my first post on StackOverflow. I hope this is not terribly wrong.

<input type="Text" id="filterTextBox" placeholder="Filter by name"/> <script type="text/javascript" src="/resources/events.js"></script> <script> $("#filterTextBox").on("keyup", function () { var search = this.value; $(".kurssikurssi").show().filter(function () { return $(".course", this).text().indexOf(search) < 0; }).hide(); }); </script> 

I have a javascript fragment similar to this in my school project, which can be found here: http://www.cc.puv.fi/~e1301192/projekti/tulos.html

Thus, the search bar at the bottom should filter the div and display only those that contain a specific keyword. (t.ex, if you type in digital electronics, it will only display Divs containing the text “Digital Electronics II” and “Digital Electronics.” Right now, if I type in random ravings, it hides everything as intended, but when I enter the beginning of the course name, it will not hide those courses that do not contain a specific text string.

Here is an example that I used (which works fine): http://jsfiddle.net/Da4mX/

It’s hard to explain, but I hope you understand that try the search function on my page. Also, I'm pretty new to javascript, and I get the part where you set the search string as var search, the rest I'm not so sure.

Please help me break the script and possibly indicate where I am wrong and how to solve the problem.

Answer 1

in your case, I think you show and hide the parent of the courses so you can try

 $("#filterTextBox").on("keyup", function () { var search = $(this).val().trim().toLowerCase(); $(".course").show().filter(function () { return $(this).text().toLowerCase().indexOf(search) < 0; }).hide(); }); 

Answer 2

Try it now, now paste this code into the console and check by doing a search.

 $("#filterTextBox").on("keyup", function () { var search = this.value; if( search == '') { return } $( ".course" ).each(function() { a = this; if (a.innerText.search(search) > 0 ) {this.hidden = false} else {this.hidden = true} }); }) 

Check and the search now works.

Answer 3

Your problem:

 return $(".course", this) 

From jquery doc: http://api.jquery.com/jQuery/#jQuery-selection

Internally, the selector context is implemented using the .find () method so $ ("span", this) is equivalent to $ (this) .find ("span")

the filtering function already checks each element when you try to put $ (". course") in a context, it will select everything again ...

Valid code:

 $("#filterTextBox").on('keyup', function() { var search = $(this).val().toLowerCase(); $(".course").show().filter(function() { return $(this).text().toLowerCase().indexOf(search) < 0; }).hide(); }); 

In fact, you can also use: contains () a CSS selector, but it is not optimized for a large list, not for crossbrowser

http://caniuse.com/#search=contains

Answer 4

You accessed the wrong items. This should work:

 $(".kurssikurssi").find('.course').show().filter(function () { var $this = $(this) if($this.text().indexOf(search) < 0){ $this.hide() } })