Jquery search multidimensional ul list

Question

I have next HTML:

  <input type="text" id="search" name="searchword" value="" />
<ul id="search_list">
    <li>first</li>
    <li>second</li>
    <li>third
        <ul>
            <li>aaa</li>
            <li>bbbb
                <ul>
                    <li>111111</li>
                    <li>22222</li>
                    <li>3333</li>
                </ul>
            </li>
            <li>cccc</li>
        </ul>
    </li>
</ul>

And I want to search this list via input. I type text into input and <li> and <ul>'s which are not search result must hide.

Thank you very much and sorry for my bad English

Have you tried to write the code to do this? What is an example search input? — Josiah Ruddell, Apr 18 '11 at 20:31

John Strickler · Accepted Answer · 2011-04-18T20:45:03.480

5

Use keyup, blur or change depending when you want the search and filter to take place.

$('#search').change(function() {
   var searchTerms = $(this).val();

   $('li').each(function() {
      var hasMatch = searchTerms.length == 0 || $(this).is(':contains(' + searchTerms  + ')');

      $(this).toggle(hasMatch);
   });
});

EDIT: Made the solution slightly more verbose so it can be read easier.

Here's the fiddle.

edited Apr 18 '11 at 20:45

answered Apr 18 '11 at 20:32

John Strickler

25,151
4
52
68

Excellent, would never say it's that simple. Thank you very much. – Wizard4U Apr 18 '11 at 20:37
2

+1: I suggest adding a fallback for nothing in the search box, e.g. `if(searchTerms.length==0){ $('li').show(); return; }` – Michael Haren Apr 18 '11 at 20:41
Good idea, since I'm pretty sure having nothing in the search box will fail it. – John Strickler Apr 18 '11 at 20:44
@Wizard4U after var searchTerms ... or insert it at the hasMatch as I did (see updated solution). Performance is negligible in this case. If it did matter then I recommend not even using .show()/.hide() but that's another discussion all together. – John Strickler Apr 18 '11 at 20:48
Can I search not depending on CAPS LOCK ? – Wizard4U Apr 18 '11 at 20:51
1

Yes but it requires a small change - see http://stackoverflow.com/questions/187537/is-there-a-case-insensitive-jquery-contains-selector – John Strickler Apr 18 '11 at 20:57
Yes, I have founded that but I do not know how to use. A little help would be appreciated. – Wizard4U Apr 18 '11 at 21:04
Solved. Thank you. This is solution: http://stackoverflow.com/questions/187537/is-there-a-case-insensitive-jquery-contains-selector/4936066#4936066 – Wizard4U Apr 18 '11 at 21:24

Jquery search multidimensional ul list

1 Answers1