How can I show all matching lines by filtering lines title attribute?-CodePudding

#myInput is the input box, and #ulmain is the ul id, .abch2 is the line heading class, .abc is the emoji lines class. when a user inputs the name of emoji, then I want to show only all matching lines and hide all other lines including h2 lines of that conainer. I am trying to run with these codes but It's not working.

$("#myInput").on("keyup", function () {
    var value = $(this).val().toLowerCase();
    var li = $("#ulmain li");
    li.hide();

    li.each(function () {
        var text = $(this).attr('title');
        if (text.includes(value)) {
            $(this).show();
        }
    });

});

#ulmain {
    list-style-type: none;
    margin: 0 0 10px;
    display: inline;
    box-sizing: border-box;
    font-family: arial;
}
#ulmain li {
    display: inline;
}
.abch2 {
    margin-top: 10px;
    margin-bottom: 10px;
    color: #383838;
    font-size: 18px;
}
.abc {
    margin-left: 4px;
    margin-bottom: 5px;
    border-radius: 8px;
    border-style: outset;
    border: 1px solid #d3d3d3;
    border-color: #d3d3d3;
    background-color: #fff;
    display: inline-block;
    width: 51px;
    height: 51px;
    font-size: 30px;
    line-height: 51px;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inarea">
                <input id="myInput" type="text" placeholder="Search..">
            </div>
<ul id="ulmain">
                <li> <span>
                        <h2 class="abch2" id="heart">Heart Symbols</h2>
                    </span> </li>
                <li><span class="abc" title="Black Heart">♥</span></li>
                <li><span class="abc" title="White Heart">♡</span></li>
                <li><span class="abc" title="Heavy Black Heart">❤</span></li>
                <li><span class="abc" title="Tilted Heavy Black Heart Bullet">❥</span></li>
                <li><span class="abc" title="Heavy Heart Exclamation Mark Ornament">❣</span></li>
                <li><span class="abc" title="Floral Heart">❦</span></li>
                <li><span class="abc" title="Rotated Floral Heart Bullet">❧</span></li>
                <li><span class="abc" title="heart love">დ</span></li>
                <li><span class="abc" title="heart love">ღ</span></li>
                <li><span class="abc" title="heart love">۵</span></li>
                <li><span class="abc" title="heart love">ლ</span></li>
                <li><span class="abc" title="heart love">ও</span></li>
                <li><span class="abc" title="heart love">ლ</span></li>
                <li><span class="abc" title="red heart lov️e">❤️️</span></li>
                <li><span class="abc" title="Broken Heart">


          
          
            Page link：https//www.codepudding.com/os/138139.html
          
          
               Prev:How do I require an input in a textbox if a certain checkbox is selected?
               Next:issue to load data from a .js file