输入和选择过滤器如何协同工作？

Question

我的页面中有两个过滤器，一个是<input>进行全局搜索，另一个是<select>元素进行category搜索。每个过滤器都可以单独使用但它们不能一起工作所以如何使它们两者一起工作？。

我已经尝试将所有功能放在一个功能中但没有工作。

编辑：这是代码在解决方案Jsfiddle

之后的样子

$('textarea').summernote({
  toolbar: false,
  disableDragAndDrop: true,
});
$('#search').keyup(function() {
  var term = $(this).val();
  if (term != '') {
    $('.panel').not('.note-editor').hide();
    $('.panel').not('.note-editor').filter(function() {
      return $(this).text().toLowerCase().indexOf(term.toLowerCase()) > -1
    }).show();
  } else {
    $('.panel').show();
  }
});
$('#list-filter').change(function() {
  var term = $('#list-filter :selected').text();
  if (term != ('' || 'Categories')) {
    $('.panel').not('.note-editor').hide();
    $('.panel').not('.note-editor').filter(function() {
      return $(this).find('span.category').text().toLowerCase().indexOf(term.toLowerCase()) > -1
    }).show();
  } else {
    $('.panel').show();
  }
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.16/summernote.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.16/summernote.js"></script>

<br />
<div class="row">
  <span class="col-xs-4">
        <span class="input-group">
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
  </span>
  <input class="form-control" id="search" type="text" name="search" placeholder="Search" />
  </span>
  </span>
  <span class="col-xs-4">
        <select id="list-filter" class="form-control">
            <option value="" selected="selected">Categories</option>
            <option value="1">First</option>
            <option value="2">Second</option>
            <option value="3">Third</option>
        </select>
    </span>
</div>
<br />
<div class="panel-group" id="accordion">

  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#one"><strong>One</strong></a>
                <span class="pull-right category">
                    Category: First
                </span>
            </h4>
    </div>
    <div id="one" class="panel-collapse collapse">
      <div class="panel-body">
        <textarea disabled>
          Lorem
        </textarea>
      </div>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#two"><strong>Two</strong></a>
                <span class="pull-right category">
                    Category: Second
                </span>
            </h4>
    </div>
    <div id="two" class="panel-collapse collapse">
      <div class="panel-body">
        <textarea disabled>
          ipsum
        </textarea>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#three"><strong>Three</strong></a>
                <span class="pull-right  category">
                    Category: Third
                </span>
            </h4>
    </div>
    <div id="three" class="panel-collapse collapse">
      <div class="panel-body">
        <textarea disabled>
          Maecenas First
        </textarea>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#fourth"><strong>Four</strong></a>
                <span class="pull-right  category">
                    Category: First
                </span>
            </h4>
    </div>
    <div id="fourth" class="panel-collapse collapse">
      <div class="panel-body">
        <textarea disabled>
          Vestibulum
        </textarea>
      </div>
    </div>
  </div>
</div>

Answer 1

将过滤移出到单独的函数，并从两个事件处理程序中调用它。然后，它可以从两个过滤字段中获取值，并检查它们。

＆＃13;

＆＃13;

$('textarea').summernote({
  toolbar: false,
  disableDragAndDrop: true,
});

function filter() {
  var search = $("#search").val().toLowerCase();
  var listterm = $("#list-filter :selected").text().toLowerCase();
  if (listterm == 'categories') {
    listterm = '';
  }
  if (search != '' || listterm != '') {
    $(".panel:not(.note-editor)").hide().filter(function() {
      var show = true;
      var thistext = $(this).text().toLowerCase();
      if (search != '' && thistext.indexOf(search) == -1) {
        show = false;
      } else if (listterm != '' && thistext.indexOf(listterm) == -1) {
        show = false;
      }
      return show;
    }).show();
  }
}

$('#search').keyup(filter);
$('#list-filter').change(filter);

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.16/summernote.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.16/summernote.js"></script>

<br />
<div class="row">
  <span class="col-xs-4">
        <span class="input-group">
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
  </span>
  <input class="form-control" id="search" type="text" name="search" placeholder="Search" />
  </span>
  </span>
  <span class="col-xs-4">
        <select id="list-filter" class="form-control">
            <option value="" selected="selected">Categories</option>
            <option value="1">First</option>
            <option value="2">Second</option>
            <option value="3">Third</option>
        </select>
    </span>
</div>
<br />
<div class="panel-group" id="accordion">

  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#one"><strong>One</strong></a>
                <span class="pull-right category">
                    Category: First
                </span>
            </h4>
    </div>
    <div id="one" class="panel-collapse collapse">
      <div class="panel-body">
        <textarea disabled>
          Lorem
        </textarea>
      </div>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#two"><strong>Two</strong></a>
                <span class="pull-right category">
                    Category: Second
                </span>
            </h4>
    </div>
    <div id="two" class="panel-collapse collapse">
      <div class="panel-body">
        <textarea disabled>
          ipsum
        </textarea>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#three"><strong>Three</strong></a>
                <span class="pull-right  category">
                    Category: Third
                </span>
            </h4>
    </div>
    <div id="three" class="panel-collapse collapse">
      <div class="panel-body">
        <textarea disabled>
          Maecenas First
        </textarea>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#fourth"><strong>Four</strong></a>
                <span class="pull-right  category">
                    Category: First
                </span>
            </h4>
    </div>
    <div id="fourth" class="panel-collapse collapse">
      <div class="panel-body">
        <textarea disabled>
          Vestibulum
        </textarea>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;