JQuery hide all divs except for the divs I search for

Question

I want to create a search input for users to quickly find teachers for my school.

Teachers

The above is a horizontal scrollbar containing a lot of teachers. Every teacher in the scrollbar is wrapped in a seperate div called staff-container.

<div class="staff-container">
    <div class="staff">
        <div class="staff-picture">
            <img src="img/people/teachers/aiello.png" alt="" />
        </div>
        <p><span class="bold">Mrs. Aiello</span><br />
        Ext. 13328<br />
        Room 328/323<br />
        <a href="mailto:asusan@wcskids.net">asusan@wcskids.net</a></p>
    </div>
</div>

The above is the staff-container for Mr. Ahmed. Every teacher has the same exact structure in HTML.

When I type a teacher's name in the search and click the search button, I want the following to happen.

Search

I want all the staff-container's that don't match the search term to be hidden with display:none; by using JQuery.

I want the search to only look for the teacher name. In other words, only the <span class="bold">teacher</span> in each staff-container should be looked for by the search.

If no teacher matches the search term, I want all the teachers to be displayed. If nothing is searched, I want all the teachers to be displayed.

Search HTML:

<div class="search-container">
    <form class="form-search form-inline">
        <input type="text" class="input-medium search-query" placeholder="Search">
        <button type="submit" class="btn">Search</button>
    </form>
</div>

Here is a VERY simple fiddle

Check out the webpage I am adding the search to. It does not have the search on it yet.

I'm sorry if I'm asking too big of a question sad face, I just need help because I have never made a search in jquery.

edited to remove downvote

@roasted It's actually just for school. I'm in a web design class. — Brett Merrifield, Jun 07 '13 at 14:27
One thought- use the names of the teachers as the class names, and filter out class names on key press. — karthikr, Jun 07 '13 at 14:29
What happens if someone types "a" and searches? Should they get all teacher's whose name contains an "a"? — cfs, Jun 07 '13 at 14:29
(If those are real email addresses, it would be better to make them fake ones for the Fiddle, to avoid them getting spammed.) — ralph.m, Jun 07 '13 at 14:30
@karthikr Yeah but the part of the JQuery I dont understand is the input. How do I make the input the class it searches for? — Brett Merrifield, Jun 07 '13 at 14:32
If I just knew how to start, I could probably figure out the rest myself. The part I need help is the input and clicking the search button calls a function that selects the teachers that matches the search term. I don't know how to code that at all. — Brett Merrifield, Jun 07 '13 at 14:36
I will be leaving class and will get back to this when I get home from school. I'll be gone until then. I'm sorry for such a hard question — Brett Merrifield, Jun 07 '13 at 14:37
Good coding Brett, looks like really for a school work, my apologies — A. Wolff, Jun 07 '13 at 14:50

score 18 · Accepted Answer · answered Jun 07 '13 at 15:17

18

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();
    });
});

answered Jun 07 '13 at 15:17

A. Wolff

74,033
9
94
155

Check out the website with help of your code :] http://www.wcs.k12.mi.us/wmhs/Staff/index.html – Brett Merrifield Jun 10 '13 at 14:30
[Here](http://stackoverflow.com/a/9510146/2218697) is similar , for **more example and effects** , just google `jquery live text search` hope helps someone. – Shaiju T Nov 16 '16 at 16:31
If you want the search to be done while typing, use: `$('.search-query').keyup(function(e){ var query = $.trim($('.search-query').val()).toLowerCase(); $('#site-list .text-primary').each(function(){ var $this = $(this); if($this.text().toLowerCase().indexOf(query) === -1) $this.closest('div.thumb-site').fadeOut(); else $this.closest('div.thumb-site').fadeIn(); }); });` – Leandro Castro Jul 18 '17 at 20:24

score 1 · Answer 2 · answered Jun 07 '13 at 14:35

1

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();

answered Jun 07 '13 at 14:35

DevZer0

13,433
7
27
51

1

better would be to use valid attribute as data: data-teacher="" – A. Wolff Jun 07 '13 at 14:41

score 0 · Answer 3 · 2013-06-07T14:38:53.557

0

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/

edited Jun 07 '13 at 14:38

answered Jun 07 '13 at 14:33

score 0 · Answer 4 · answered Jun 07 '13 at 14:39

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

score 0 · Answer 5 · answered Jun 07 '13 at 14:46

0

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>

answered Jun 07 '13 at 14:46

rafaelcastrocouto

11,781
3
38
63

1

on change needs focus to be changed as well. If you keyup, the results are as you type ;-) – Syfer Oct 06 '20 at 03:43

score 0 · Answer 6 · answered Jun 07 '13 at 14:56

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

JQuery hide all divs except for the divs I search for

6 Answers6

Linked