Question

我正在使用Bootstrap 3精选标签，并希望提供类似于过滤表格的功能。

换句话说，当用户输入时 - 使不相关的标签消失，因此用户可以告诉他们不包含输入的字符串。

我不确定如何解决这个问题，任何一般性的想法都会受到赞赏。显然，代码片段也是如此。

Answer 1

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

你可以尝试这样的事情。 https://jsfiddle.net/SeanWessell/dsnwkw66/

Answer 2

有点不同的方法（检查标签的内容，而不是标题）。

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

在Bootstrap选项卡中搜索

2 个答案:

的 CODEPEN