Jquery 在引导选项卡中搜索

我正在使用Bootstrap 3 pill tabs，并希望提供类似于使用live筛选表的功能

换句话说，当用户键入时，不相关的选项卡消失，因此用户可以判断它们不包含键入的字符串

我不知道该怎么做，如果有任何一般性的想法，我们将不胜感激。显然，代码片段也是如此

$('#search').on('input', function() {
  var search = this.value;
  $('.nav.nav-pills li').hide().filter(function() {
    //get target from tabs anchor and create jQuery Object
    var $target = $($(this).find('a').attr('href'));
    //Return true if the text contains the search word
    return ($target.text().indexOf(search) != -1);
  }).show().eq(0).find('a').click();
  //get 1st item (index of 0) and click the anchor to set it to active and activate
  //the associated tab-pane
})

你可以试试这样的。

你可以试试这样的。

---

有点不同的方法（检查选项卡的内容，而不是标题）

var tabLinks=$（'.nav>li'），
tabsContent=$（'.tab content>div'），
tabContent=[]，
一串
我
J
对于（i=0；i-1）{
tabLinks.eq（j.show（）；
tabLinks.eq（j）.find（'a'）.tab（'show'）；
}否则{
tabLinks.eq（j）.hide（）；
}
}
});

---

有点不同的方法（检查选项卡的内容，而不是标题）

var tabLinks=$（'.nav>li'），
tabsContent=$（'.tab content>div'），
tabContent=[]，
一串
我
J
对于（i=0；i-1）{
tabLinks.eq（j.show（）；
tabLinks.eq（j）.find（'a'）.tab（'show'）；
}否则{
tabLinks.eq（j）.hide（）；
}
}
});

var tabLinks = $('.nav > li'),
  tabsContent = $('.tab-content > div'),
  tabContent = [],
  string,
  i,
  j;

for (i = 0; i < tabsContent.length; i++) {
  tabContent[i] = tabsContent.eq(i).text().toLowerCase();
}
$('input').on('input', function() {
  string = $(this).val().toLowerCase();
  for (j = 0; j < tabsContent.length; j++) {
    if (tabContent[j].indexOf(string) > -1) {
      tabLinks.eq(j).show();
      tabLinks.eq(j).find('a').tab('show');
    } else {
      tabLinks.eq(j).hide();
    }
  }
});