Javascript 如何使用带有键控功能的输入框动态显示匹配的列表元素

我在codepen.io中创建了一个链接到twitch流列表的站点，然后在一个选项卡中显示在线流，在另一个选项卡中显示离线流，在第三个选项卡中显示两者。每个用户都通过JQuery函数附加到相应的选项卡上。（本工程）

我试图用输入元素搜索选项卡，并显示匹配的twitch流

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

谢谢你的帮助

到目前为止，我已经做到了：

html：

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

试试这个-

---

此外，Angular JS使在大数据上插入此类功能变得非常容易。您可能想查看它。

这无疑是向前迈出的一步。现在将搜索选项卡标题，而不是列表元素。因此，如果我键入“a”，将显示“全部”选项卡，其余选项卡将隐藏。但是，我需要搜索“全部”（或任何活动选项卡）显示的元素。尽管如此，我现在得到了一些结果，所以谢谢你。我正试着再摆弄一下。编辑：我刚看到你推荐Angular.JS。我现在正在经历这一切。我在理解我现在正在做的事情上肯定有很大的差距，所以我也要走这条路。@BurningDaisies你在说什么元素？还有其他HTML代码吗？你能分享一下你所说的所有元素到底是什么意思吗？我想你是对的。我刚刚添加了添加流的div的html。我正在尝试使用这些div id作为隐藏和显示，而不是选项卡。@BurningDaisies-这是您需要的更新代码。更新答案也是如此。感谢您的帮助。您不应该选择$（“#Online”）之类的选项卡内容，而不是选项卡列表项$（“.nav active”）吗？参考：

 $('#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();
        }
    });
});