JQuery selection on multiple levels of elements

Question

I want to create a JQuery statement: when I input a value in the input field, the JQuery statement can select a list of items according to the content of tag.

For example, if I input "F" in the input field, list with id "2" and "3" can be selected.

Here is the HTML code:

<input id="test" type="text">
<ul id="myul" class="myul">
    <li id="1" class="a">
        <span>
            <b>Money</b>
            <i>Fish Money Food a</i>
        </span>
    </li>
    <li id="2" class="a">
        <span>
            <b>Food</b>
            <i>Fish Money Food b</i>
        </span>
    </li>
    <li id="3" class="a">
        <span>
            <b>Fish</b>
            <i>Fish Money Food c</i>
        </span>
    </li>
</ul>

However, I want a general solution, this general solution can also work for other HTML code in similar structure, for example:

<ul id="myul" class="myul">
    <li id="1" class="a">
        <a>Money</a>
        <i>Fish Money Food a</i>
    </li>
    <li id="2" class="a">
        <a>Food</a>
        <i>Fish Money Food b</i>
    </li>
    <li id="3" class="a">
        <a>Fish</a>
        <i>Fish Money Food c</i>
    </li>
</ul>

I am new to JQuery, can anybody help me?

Thanks.

Answer 1

Something like this? You can use :contains to search for an element that has that text

$('#test').on('keyup', function () {
    $('#myul li').hide();
    $('#myul li:contains("' + this.value + '")').show();
});

DEMO

You can make :contains case insensitive by pasting in this code .

jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
    return function( elem ) {
        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});