如何在 div 面板中搜索组词

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

这是一种允许用户输入的方法，即：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 2

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

Answer 3

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

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