Question

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

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

我已经在文本元素上使用了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>

有问题的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();         
      });
    });

Answer 1

试试这个 - fiddle

    $('#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非常容易在大数据上强制执行此类功能。你可能想看一下。

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

1 个答案: