Javascript 如何在使用Jquery键入搜索栏时添加显示/隐藏函数列表项？

这是我的代码，我需要的是，当您在搜索栏中键入时，我的列表项应切换到我正在键入的内容。例如，当列表中有人的名字是Michael时，当我输入Michael或m或mich（你得到它）时，名字和信息必须显示出来，当它不相似时，它必须消失。我不想按钮或任何东西，只有当键入时，它会自动切换

<asp:Panel ID="TrainerPanel" runat="server">
<asp:ObjectDataSource ID="TrainersObjectDataSource" runat="server"
    DataObjectTypeName="DotNetNuke.Modules.TrainerPlanning.Components.Trainer"
    TypeName="DotNetNuke.Modules.TrainerPlanning.Components.TrainerController"
    SelectMethod="GetTrainers"></asp:ObjectDataSource>

<div class="form-group">
    <div class="input-group"><span class="input-group-addon"></span><input class="form-control" id="trainerSearch" placeholder="Zoeken..." type="text"></div>
    </div>

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="TrainersObjectDataSource">
    <HeaderTemplate>
        <ul class="list-group trainers-list" id="myList"> 
            
    </HeaderTemplate>
    <FooterTemplate>
        </ul>
    </FooterTemplate>
   <ItemTemplate>
           <li class="list-group-item">
                <div class="s-name" id="Naam" data-original="[Naam]"><%# Eval("Displaynaam") %></div>
                <i class="fa fa-envelope-o fa-fw"></i><a class="s-email" data-original="[Email]" href="mailto:<%# Eval("Email") %>"><%# Eval("Email") %></a><br /> 
                <i class="fa fa-phone fa-fw"></i><a class="s-phone" data-original="[Phone]" href="tel:0031123456789"><%# Eval("Telefoon") %></a></li>
   </ItemTemplate>
</asp:Repeater>


<script>
$(function () {
     $("#trainerSearch").on("keyup", function () {
         var value = $(this).val().toLowerCase();
         $("#myList li").filter(function () {
             var show = $(this).text().toLowerCase().indexOf(value) > -1;
             $(this).toggleClass('d-none', !show).toggleClass('d-flex', show);
         });
         $('li').each(function () {
             $(this).toggle(show);
         })
     });
 });
</script>
</asp:Panel>

$（函数（）{
$（“#trainerSearch”）。关于（“键控”，函数（）{
var value=$（this.val（）.toLowerCase（）；
$（“#myList li”）.filter（函数（）{
var show=$（this.text（）.toLowerCase（）.indexOf（value）>-1；
$（this.toggleClass（'d-none'，！show.）.toggleClass（'d-flex'，show）；
});
$（'li'）。每个（函数（）{
$（此）.toggle（显示）；
})
});
});

我不希望仅在脚本标记之间的上半部分进行更改

 <script>
$(function () {
     $("#trainerSearch").on("keyup", function () {
         var value = $(this).val().toLowerCase();
         $("#myList li").filter(function () {
             var show = $(this).text().toLowerCase().indexOf(value) > -1;
             $(this).toggleClass('d-none', !show).toggleClass('d-flex', show);
         });
         $('li').each(function () {
             $(this).toggle(show);
         })
     });
 });
</script>

$（函数（）{
$（“#trainerSearch”）。关于（“键控”，函数（）{
var value=$（this.val（）.toLowerCase（）；
$（“#myList li”）.filter（函数（）{
var show=$（this.text（）.toLowerCase（）.indexOf（value）>-1；
$（this.toggleClass（'d-none'，！show.）.toggleClass（'d-flex'，show）；
});
$（'li'）。每个（函数（）{
$（此）.toggle（显示）；
})
});
});

请包含输出html，而不是asp.net（？）代码（或使用相关技术标记问题）使用Jquery autocomplete或选择2，两者都可以自定义。