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

我在设置任务栏中的搜索输入以隐藏和显示菜单中的元素时遇到问题。我想设置一个jQuery函数，如果输入（#搜索栏）中输入的字符串出现在子列表中的某个项目中，它会自动循环遍历我的第一个列表，并将类“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>

var-str；
函数searchT（）{
str=$（“#搜索栏”）.text（）；
$（“ul li:contains（str））.addClass（“active”）；
}; 


托马斯


红色


橙色


绿色




蒂埃里


蓝色

您没有得到这样的输入值

$（“#搜索栏”）。text（）

；应更改为

$（“#搜索栏”）。val（）

改为

var str = $('#search-bar').val();
  $("ul li:contains("+str+")").addClass("active");

尝试使用输入，就像鼠标悬停事件一样

 $('#search-bar').on("input", function () {
    var str = this.value.trim();

    $("ul li:contains(" + str + ")").addClass("active");
});

---

什么将返回$（“#搜索栏”）.text（）；刚刚修改了代码并添加了输入#搜索栏，对不起..我应该在输入中添加onchange=“searchT（）”元素吗？@StagiaireGeomatic I updated，如果您有任何问题，可以在中显示您的演示代码吗jsfiddle@StagiaireGeomatic你打开那个链接了吗，它没有任何东西，任何jquery文件

 $('#search-bar').on("input", function () {
    var str = this.value.trim();

    $("ul li:contains(" + str + ")").addClass("active");
});