更新

Question

我做了这个fiddle来向你展示我想要的东西。我有多个面板，里面有文字。面板内的每个单词都以<br>分隔。

我必须制作一个过滤器并隐藏所有与搜索栏上的文字不匹配的面板。

示例：如果我在搜索栏中输入Hamburger Banana，那么我必须显示第一个面板并隐藏另一个面板。如果我输入Banana Hamburger Eggs，则不会显示任何内容。

你知道一个javascript库或JQuery方法吗？我看到fusejs.io它完全符合我的要求，但我发现它仅仅是为了在json中进行搜索。

这是我的HTML：

<div class="row" style="margin-top: 20px;margin-bottom: 20px;">
  <div class="col-md-12">
    <input type="text" class="form-control" placeholder="Search..." />
  </div>
</div>

<div class="row">
  <!-- FIRST PANEL -->
  <div class="col-sm-6">
    <div class="panel panel-default" style="min-height: 150px;">
      <div class="panel-body">
        Banana<br>
        Hamburger<br>
        Pizza<br>
        Cheese<br>
        Tomato<br>
      </div>
    </div>
  </div>

  <!-- SECOND PANEL -->
  <div class="col-sm-6">
    <div class="panel panel-default" style="min-height: 150px;">
      <div class="panel-body">
        One<br>
        Two<br>
        three<br>
        four<br>
      </div>
    </div>
  </div>
 </div>

 <div class="row">
  <!-- THRID PANEL -->
  <div class="col-sm-6">
    <div class="panel panel-default" style="min-height: 150px;">
      <div class="panel-body">
        Hey<br>
        Eggs<br>
        Stackoverflow<br>
      </div>
    </div>
  </div>

  <!-- FOURTH PANEL -->
  <div class="col-sm-6">
    <div class="panel panel-default" style="min-height: 150px;">
      <div class="panel-body">
        Search<br>
        Me<br>
        Please<br>
        Dude<br>
      </div>
    </div>
  </div>
 </div>

Answer 1

您可以将函数绑定到输入。

$(function() {
  $('.form-control').on('input', function() {
    $('.panel-body').show().not(':contains('+ this.value +')').hide();
  });
});

注意这是个案敏感

Updated Fiddle

更新

对于多个单词（以空格分隔），请使用此功能

$(function() {
    $('.form-control').on('blur', function() {
    $('.panel-body').show();
    var val = $(this).val(),
            words = val.split(' '),
            selector = '.panel-body';
    $.each(words, function(i, val) {
        selector += ':not(:contains('+val+'))';
    })
    $(selector).hide();
  });
});

Updated Fiddle

Answer 2

这是一种允许用户键入即：banana one eg（甚至小写）并让所有匹配字段保持可见的方法：

jsFiddle Demo

$(function() {

  $('.form-control').on('input', function() {

    var val = $.trim(this.value).replace(/\s+/g,"|");
    var reg = new RegExp(val, "ig");

    $('.panel-body').show().filter(function() {
      return !this.textContent.match(reg);
    }).hide();

  });

});

虽然上面会显示所有包含查询字词的方框，但是如果您希望仅显示完全匹配完整查询字符串的那些框：

<强> jsFiddle demo

$(function() {

    var $panelBody = $('.panel-body');

  $('.form-control').on('input', function() {

    var val = $.trim(this.value).replace(/\s+/g,"|"),
        reg = new RegExp(val, "ig"),
        matchMax = [];

    if(!val) return $panelBody.show();

    $panelBody.show().text(function(i, v) {
      var r = v.match(reg);
      this.max = 0;
      if(r){
        matchMax.push(r.length);
        this.max = r.length;
      }
    }).filter(function() {
      return this.max < Math.max.apply( null, matchMax );
    }).hide();

  });

});

Answer 3

试试https://jsfiddle.net/d05yg03y/7/

这应该删除额外的空格，接受不敏感的单词

    $(".form-control").on('keyup', function() {
      var val = $(this).val().toLowerCase().trim().replace(/\s+/g, " ").replace(/[\n\r\t]/g, " ").split(" ");
    
      $(".col-sm-6").each(function() {
        var t = $(this);
        t.hide();
        $.each(val, function(a, v) {
          var h = t.text().toLowerCase().indexOf(v) > -1;
          if (h) {
            t.show();
            return false;
          }
    
        })
      });
    });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="row" style="margin-top: 20px;margin-bottom: 20px;">
  <div class="col-md-12">
    <input type="text" class="form-control" placeholder="Search..." />
  </div>
</div>

<div class="row">
  <div class="col-sm-6">
    <div class="panel panel-default" style="min-height: 150px;">
      <div class="panel-body">
        Banana<br>
        Hamburger<br>
        Pizza<br>
        Cheese<br>
        Tomato<br>
      </div>
    </div>
  </div>
  
  <div class="col-sm-6">
    <div class="panel panel-default" style="min-height: 150px;">
      <div class="panel-body">
        One<br>
        Two<br>
        three<br>
        four<br>
      </div>
    </div>
  </div>
 </div>
 
 <div class="row">
  <div class="col-sm-6">
    <div class="panel panel-default" style="min-height: 150px;">
      <div class="panel-body">
        Hey<br>
        Eggs<br>
        Stackoverflow<br>
      </div>
    </div>
  </div>
  
  <div class="col-sm-6">
    <div class="panel panel-default" style="min-height: 150px;">
      <div class="panel-body">
        Search<br>
        Me<br>
        Please<br>
        Dude<br>
      </div>
    </div>
  </div>
 </div>

如何在div面板

3 个答案:

更新