如何使用带有 keyUp 函数的输入框来动态显示匹配的列表元素

How to use an input box with an keyUp function to dynamically display matched list elements

本文关键字：动态显示 列表元素 输入 keyUp 函数 何使用      更新时间：2023-09-26

我在 codepen.io 创建了一个链接到 twitch 流列表的网站，然后在一个选项卡中显示在线流媒体，在另一个选项卡中显示离线，在第三个选项卡中显示两者。 每个用户都通过 JQuery 函数追加到相应的选项卡。 （这有效）

我正在尝试使用输入元素搜索选项卡并显示匹配的抽搐流。

我已经在文本元素上使用 at keyup 函数，但我不知道如何将其应用于附加了元素的选项卡。 唯一提出的类似问题与简单的列表有关，而不是选项卡。

感谢您的任何和所有帮助。

这就是我到目前为止所得到的：

该网页：

<h1 id="head">
  <input type="text" id="inputBox" class="rounded" value="">
</h1>
<ul class="nav nav-tabs" id = "list">
    <li class="nav active" id ="AllTab"><a href ="#All" role="tab" data-toggle="tab">All</a></li>
    <li class="nav" id ="OnlineTab"><a href="#Online" role="tab" data-toggle="tab">Online</a></li>
    <li class="nav" id="OfflineTab"><a href="#Offline" role="tab" data-toggle="tab">Offline</a></li>
</ul>
<div class="tab-content" id="stuff">
    <div class="tab-pane fade in active" id="All">
    </div>
    <div class="tab-pane fade" id="Online">
    </div>
    <div class="tab-pane fade" id="Offline" >
    </div>
 </div>

有问题的 JavaScript：

 $('#inputBox').keyup(function(){
      var valThis = $(this).val();
      $('.nav active').each(function(){
        var text = $(this).text().toLowerCase();
        (text.indexOf(valThis) != -1) ? $(this).show() : $(this).hide();         
      });
    });

试试这个 - 小提琴

    $('#inputBox').keyup(function () {
    var valThis = $(this).val().toLowerCase();
    $('.nav,.tab-pane').hide();
    $('.nav').each(function () {
        var text = $(this).text().toLowerCase();
        if (text.indexOf(valThis) > -1) {
            $(this).show();
           $('#'+$(this).attr("id").replace('Tab','')).show();
        } else {
            $(this).hide();
             $('#'+$(this).attr("id").replace('Tab','')).hide();
        }
    });
});

此外，Angular JS使得在大数据上实现此类功能变得非常容易。你可能想看看。

相关文章：