JQuery - Filter nested list based on textbox input

Question

I have a nested list of checkboxes which I need to filter them down based on textbox input compared to the label's value. The list looks like this but a lot larger:

Fiddle: https://jsfiddle.net/y9qqgjp5/

However, I'm having trouble with the nested part of this. As I have it now, if you go to search a user (2nd level item), the parent becomes hidden because it doesn't match and thus makes the children hidden, as well. It works fine with filtering on a parent.

Here's the simplified structure I'm filtering on.

HTML:

<input type="text" id="filter" />
<span class="checkbox-list">
<ul>
    <li>
        <label>Item1</label>
        <ul>
            <li>
                <label>Item2</label>
            </li>
            <li>
                <label>Item3</label>
            </li>
            <li>
                <label>Item4</label>
            </li>
            <li>
                <label>Item5</label>
            </li>
        </ul>
    </li>
    <li>
        <label>Item6</label>
    </li>
    <li>
        <label>Item7</label>
        <ul>
            <li>
                <label>Item4</label>
            </li>
            <li>
                <label>Item8</label>
            </li>
        </ul>
    </li>
</ul>
</span>

JQuery:

$('#filter').keyup(function() {
  var valThis = $(this).val().toLowerCase();
  if (valThis == "") {
    $('.checkbox-list > ul > li > label').parent().show();
  } else {
    $('.checkbox-list > ul > li > label').each(function() {
      var text = $(this).text().toLowerCase();
      (text.indexOf(valThis) >= 0) ? $(this).parent().show(): $(this).parent().hide();
    });
  };

  if (valThis == "") {
    $('.checkbox-list > ul > li > ul > li > label').parent().show();
  } else {
    $('.checkbox-list > ul > li > > ul > li > label').each(function() {
      var text = $(this).text().toLowerCase();
      (text.indexOf(valThis) >= 0) ? $(this).parent().show(): $(this).parent().hide();
    });
  };
});

Any help is appreciated. I can't wrap my head around the nested part of this.

So what did you want to happen? If I search for item2, it shows the parent and item2 itself? — Huangism
– Huangism, Commented Feb 8, 2018 at 16:20

Pete · Accepted Answer · 2018-02-08 16:36:50Z

5

Try using parents()

var labels = $('label');  // cache this for better performance

$('#filter').keyup(function() {
  var valThis = $(this).val().toLowerCase();
  
  if (valThis == "") {
    labels.parent().show();          // show all lis
  } else {
    labels.each(function() {
      var label = $(this);                    // cache this
      var text = label.text().toLowerCase();
      if (text.indexOf(valThis) > -1) {
        label.parents('li').show()           // show all li parents up the ancestor tree
      } else {
       label.parent().hide();                // hide current li as it doesn't match
      }
    });
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="filter" />
<span class="checkbox-list">
<ul>
    <li>
        <label>Item 1</label>
        <ul>
            <li>
                <label>Item 12</label>
            </li>
            <li>
                <label>Item3</label>
            </li>
            <li>
                <label>Item4</label>
            </li>
            <li>
                <label>Item5</label>
            </li>
        </ul>
    </li>
    <li>
        <label>Item6</label>
    </li>
    <li>
        <label>Item7</label>
        <ul>
            <li>
                <label>Item4</label>
            </li>
            <li>
                <label>Item8</label>
            </li>
        </ul>
    </li>
</ul>
</span>

answered Feb 8, 2018 at 16:36

Pete

58.8k31 gold badges132 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

justiceorjustus Over a year ago

This works for what I specified. However, I did notice I don't like the functionality of one part: When it matches a parent, all of the children should show. I'm not sure if that warrants another question or if it's an easy change... let me know. I'll give it a shot myself, too.

Pete Over a year ago

That's probably a new question as it would be quite a big change, you wouldn't be able to use an each like above as you may hide children again after they are shown

Collectives™ on Stack Overflow

JQuery - Filter nested list based on textbox input

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related