javascript - 如何在使用 Jquery 输入搜索栏时添加显示/隐藏功能列表项？

Question

这是我的代码，我需要的是，当您在搜索栏中键入时，我的列表项应该切换我正在键入的内容。例如，当列表中的某个人的名字为 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:[phone]"><%# 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>

我不希望仅在脚本标签之间更改上部。

 <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>

标签： javascripthtmljquerydom