用于显示/隐藏div的动态搜索功能

Question

this is my first post on StackOverflow. I hope it doesn't go horribly 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 snippet like this on my school project, which can be found here: http://www.cc.puv.fi/~e1301192/projekti/tulos.html

So the search bar at the bottom is supposed to filter divs and display only those, that contain certain keyword. (t.ex, if you type Digital Electronics, it will display only Divs that contain text "Digital Electronics II" and "Digital Electronics". Right now, if I type random gibberish, it hides everything like it's supposed to, but when I type in the beginning of a course name, it will not hide the courses that dont contain the certain text-string.

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

Hard to explain, but I hope you realize if you try the search-function on my page. Also, I'm pretty new to javascript, and I get the part where you set the searchbox's string as var search, the rest I'm not so sure about.

Please help me break down the script, and possibly point where I'm going wrong, and how to overcome the problem.

Answer 1

in your case I think you show and hide the parent of 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 this this is working now, paste this code in console and check, by searching.

 $("#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 is now working.

Answer 3

Your problem is there :

return $(".course", this)

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

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

filter function already check each elements then, when you try to put $(".course") in context, it will fetch all 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 alternatively use :contains() CSS selector, but, it is not optimized for a large list and not crossbrowser

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

Answer 4

You were accessing the wrong elements. This should be working:

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