輸入和選擇過濾器如何一起工作？

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

將過濾移到單獨的函數中，然后從兩個事件處理程序中調用它。 然后，它可以從兩個過濾字段中獲取值，並同時檢查它們。

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