正确使用jquery在列表和子列表中进行搜索

我无法在任务栏上设置搜索输入以在菜单中隐藏和显示元素。我想设置一个jQuery函数，该函数会自动循环通过我的第一个列表，并在输入（＃search-bar）中输入字符串的情况下，将“ active”类添加到#thomas或#thierry（请查看代码）在子列表的某个项目中。

基本上我的HTML看起来像这样，有关如何编写脚本的任何想法？

<script type="javascript">
var str;
function searchT() {
    str = $('#search-bar').text();
    $("ul li:contains(str)).addClass("active");
}; </script>
<input id="search-bar" type="text" name="search" placeholder="Rechercher" class="form-control gbo-search-sidebar" />
<ul>
        <li id="Thomas">
                <span class="title">
                   Thomas
                </span>
            <ul class="sub-menu">
                <li id="red">

                        <span class="title">
                            Red
                        </span>
                </li>
                <li id="orange">
                        <span class="title">
                            Orange
                        </span>
                </li>
                <li id="Green">   
                        <span class="title">
                            Green
                        </span>
                    </a>
                </li>
            </ul>
        </li>

        <li class=" start" id="Thierry">
                <span class="title">
                    Thierry
                </span>
            <ul class="sub-menu">
                <li id="blue">
                        <span class="title">
                            Blue
                        </span>
                    </a>
                </li>
            </ul>
        </li>
</ul>