jquery hide/show question

Question

I have a list that looks like this:

<span id="contacts_tab_contacts_list_list"> 
                <li><span id="contact_35">John</span> 
                </li> 
                <li><span id="contact_36">Ron a</span> 
                </li> 
                <li><span id="contact_33">Ron b</span> 
                </li> 
                <li><span id="contact_34">35</span> 
                </li> 
                <li><span id="contact_39">33</span> 
                </li> 
                <li><span id="contact_37">66</span> 
                </li> 
                <li><span id="contact_38">77</span>
...
</span>

I have a <input> that I use to filter the list with jQuery. I try to do it using these two jQuery lines:

$("#contacts_tab_contacts_list_list").children().hide();
$("#contacts_tab_contacts_list_list:contains('" + searchValue + "')").show();

So for example, typing Ron into the search box will make contact_36 and contact_33 be the only visible elements in the list. the hide() part works. the show() doesn't.

What am I doing wrong? (Assume searchValue has the correct value, in this case Ron)

Is there a better way to do this?

Thanks!

Answer 1

Try narrowing down the selection to the nested span elements:

$("#contacts_tab_contacts_list_list li span:contains('" + searchValue + "')").show();