How can Input and Select filters work together?

Question

I have two filters in my page one is an <input> to make a global search and the other is a <select> element to make a category search. Each filter Works fine individually but they don't work together so How can I make that the both of them work together?.

I already tried to put all in one function but didn't Works.

EDIT: This is how the code looks after the solution 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

Move the filtering out to a separate function, and call it from both event handlers. It can then get the values from both filtering fields, and check them both.

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

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