JQuery hide all divs except for the divs I search for [closed]

Answer 1

Check jsfiddle:

http://jsfiddle.net/XjgR2/

$('.form-search').on('submit',function(){return false;});
$('.form-search .btn').on('click', function(e){
    var query = $.trim($(this).prevAll('.search-query').val()).toLowerCase();
    $('div.staff-container .bold').each(function(){
         var $this = $(this);
         if($this.text().toLowerCase().indexOf(query) === -1)
             $this.closest('div.staff-container').fadeOut();
        else $this.closest('div.staff-container').fadeIn();
    });
});

Answer 2

Here is something you can do with css3 selectors. In your div staff-container create an attibute called teacher. For example

<div class='staff-container' teacher='John Dow'>.....</div>

Then in your jquery use the following css3 selector

var searchval = $('.search-query').val()
$("div[teacher*=" + searchval + "]").show();

Answer 3

http://jsfiddle.net/5UUM7/

With jquery:

$('#search').on('change', function(e){
    var q = e.target.value;
    $('div.staff-container').each(function(){
        var name = this.children[0].children[1].children[0].textContent;
        if(name.search(q) < 0) $(this).hide();
    });
});

HTML:

Search: <input type="text" id="search"></input>
<div class="staff-container"> ... </div>
<div class="staff-container"> ... </div>

Answer 4

Have you considered Angularjs? It provides pretty straightforward solutions to problems like these: http://docs.angularjs.org/api/ng.filter:filter

Edit If you want something in pure jquery, maybe look at something like this: http://kilianvalkhof.com/2010/javascript/how-to-build-a-fast-simple-list-filter-with-jquery/

Answer 5

Well if you want others to disapear, that means that the code should do the following: 1.Keypress event listener on search box, which would check the value on each key press if it matches any name in those containers (matching could be limited, need to test this and see how it goes). 2.Upon successful match of the name typed in the search box and span containing name, which by the way should be named accordingly so you could address it in JS code, the code should iterate through all other parent divs of those 'named' spans and set them hidden, except for the matching one(it should exclude it, so that means and IF statement and for, or equivalent, loop).

Let me know if this will be helpful.

PS.: nice website, i would just increase the quality of the photos and fix the background in them to more neutral one, like white or whitesmoke, not sure what would work best.

GL

Answer 6

you can do (case sensitive):

$(".btn").click(function(){
    var show=$(".staff-container .bold:contains('"+$(".search-query").val()+"')").parents(".staff-container");
    show.css("display","block");
    $(".staff-container").not(show).css("display","none");
});     

http://jsfiddle.net/KqFMh/1/ you can add some class instead of .bold for the name and some id instead of .search-query