搜索過濾器繼續搜索所有類別的jQuery

Question

嗨，我是一個新手，我有點卡在這里。 我在下面進行搜索。

問題是我可以使用select選項過濾出類別。 但是我不能只在所選類別中搜索。 搜索總是查找所有帶有.visible div's 。 我知道我必須從不屬於所選類別的div's刪除.visible ，但我沒有主意。

有人可以幫我嗎？

鏈接到小提琴

  $("#searchInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#searchFilterDiv div.CompanyDirectoryItem.visible").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); console.log(value); }); //Filter studyFields $('select#studyselector').change(function() { var filter = $(this).val() filterList(filter); console.log(filter); }); //News filter function function filterList(value) { var list = $("#searchFilterDiv div.CompanyDirectoryItem.search-results-box-item"); $(list).fadeOut("fast"); $("#searchFilterDiv").find("div.CompanyDirectoryItem.search-results-box-item[data-name*=" + value + "]").addClass('visible').each(function (i) { $(this).delay(200).slideDown("fast"); }); //} } if($('.CompanyDirectoryItem.visible').length===0){ $('.error').show(); }else{ $('.error').hide(); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h2>sortdata</h2> <input id="searchInput" type="text" value="" placeholder="search"/> <select name="studyselector" id="studyselector"> <option value="All">All news</option> <option value="Cat1">Category 1</option> <option value="Cat2">Category 2</option> <option value="Cat3">Category 3</option> <option value="Cat4">Category 4</option> <option value="Cat5">Category 5</option> <option value="Cat6">Category 6</option> <option value="Cat7">Category 7</option> </select> <hr /> <div id="searchFilterDiv"> <div class="CompanyDirectoryItem search-results-box-item" data-name=" All, Cat1"> <div class="thumb"> <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150"> </div> <div class="news-txt"> <h3><a href="">A news title1</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p> </div> </div> <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat2, Cat5"> <div class="thumb"> <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150"> </div> <div class="news-txt"> <h3><a href="">A news title2</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p> </div> </div> <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat3"> <div class="thumb"> <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150"> </div> <div class="news-txt"> <h3><a href="">A news title3</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p> </div> </div> <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat4"> <div class="thumb"> <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150"> </div> <div class="news-txt"> <h3><a href="">A news title4</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p> </div> </div> <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat5"> <div class="thumb"> <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150"> </div> <div class="news-txt"> <h3><a href="">A news title5</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p> </div> </div> <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat6, Cat1"> <div class="thumb"> <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150"> </div> <div class="news-txt"> <h3><a href="">A news title6</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p> </div> </div> <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat7, Cat3"> <div class="thumb"> <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150"> </div> <div class="news-txt"> <h3><a href="">A news title7+3</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p> </div> </div> <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat7"> <div class="thumb"> <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150"> </div> <div class="news-txt"> <h3><a href="">A news title7</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p> </div> </div> </div> 

Answer 1

如果我明白您的意思..您只需要刪除visible類？！

您可以從所有search-results-box-item刪除visible類，然后使用.filter("[data-name*=" + value + "]")像這樣按data-name屬性進行過濾

$("#searchFilterDiv").find("div.CompanyDirectoryItem.search-results-box-item").removeClass('visible').filter("[data-name*=" + value + "]").addClass('visible').each.....`

---

 $("#searchInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#searchFilterDiv div.CompanyDirectoryItem.visible").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); console.log(value); }); //Filter studyFields $('select#studyselector').change(function() { var filter = $(this).val() filterList(filter); console.log(filter); }); //News filter function function filterList(value) { var list = $("#searchFilterDiv div.CompanyDirectoryItem.search-results-box-item"); $(list).fadeOut("fast"); $("#searchFilterDiv").find("div.CompanyDirectoryItem.search-results-box-item").removeClass('visible').filter("[data-name*=" + value + "]").addClass('visible').each(function (i) { $(this).delay(200).slideDown("fast"); }); //} } if($('.CompanyDirectoryItem.visible').length===0){ $('.error').show(); }else{ $('.error').hide(); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h2>sortdata</h2> <input id="searchInput" type="text" value="" placeholder="search"/> <select name="studyselector" id="studyselector"> <option value="All">All news</option> <option value="Cat1">Category 1</option> <option value="Cat2">Category 2</option> <option value="Cat3">Category 3</option> <option value="Cat4">Category 4</option> <option value="Cat5">Category 5</option> <option value="Cat6">Category 6</option> <option value="Cat7">Category 7</option> </select> <hr /> <div id="searchFilterDiv"> <div class="CompanyDirectoryItem search-results-box-item" data-name=" All, Cat1"> <div class="thumb"> <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150"> </div> <div class="news-txt"> <h3><a href="">A news title1</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p> </div> </div> <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat2, Cat5"> <div class="thumb"> <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150"> </div> <div class="news-txt"> <h3><a href="">A news title2</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p> </div> </div> <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat3"> <div class="thumb"> <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150"> </div> <div class="news-txt"> <h3><a href="">A news title3</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p> </div> </div> <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat4"> <div class="thumb"> <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150"> </div> <div class="news-txt"> <h3><a href="">A news title4</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p> </div> </div> <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat5"> <div class="thumb"> <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150"> </div> <div class="news-txt"> <h3><a href="">A news title5</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p> </div> </div> <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat6, Cat1"> <div class="thumb"> <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150"> </div> <div class="news-txt"> <h3><a href="">A news title6</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p> </div> </div> <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat7, Cat3"> <div class="thumb"> <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150"> </div> <div class="news-txt"> <h3><a href="">A news title7+3</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p> </div> </div> <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat7"> <div class="thumb"> <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150"> </div> <div class="news-txt"> <h3><a href="">A news title7</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p> </div> </div> </div> 

Answer 2

您可以更改onkeyup事件偵聽器，以便它將獲取所有具有新聞內容的div，然后將其內容與在搜索框中輸入的內容進行比較。 它可以使用.search（）方法和新創建的RegExp對象檢查搜索是否出現在divs新聞內容中：

編輯 ：為了在新聞內容中使用RegExp，還必須處理特殊字符，因此我添加了新行以將特殊字符（例如，“ +”替換為“ +”等）。

 //changed your onkeyup listener to use regexp //on all divs which contain news content eg //divs with class news-txt $("#searchInput").on("keyup", function() { var value = $(this).val().toLowerCase(); //in order to use RegExp, you must escape special characters, such as the "+" you use in one title value = value.replace(/[-\\/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&'); $('.news-txt').each(function() { if ($(this).text().search(new RegExp(value, "i")) < 0) { $(this).parent().hide(); } else { $(this).parent().show(); } }); }); //Filter studyFields $('select#studyselector').change(function() { var filter = $(this).val() filterList(filter); console.log(filter); }); //News filter function function filterList(value) { var list = $("#searchFilterDiv div.CompanyDirectoryItem.search-results-box-item"); $(list).fadeOut("fast"); $("#searchFilterDiv").find("div.CompanyDirectoryItem.search-results-box-item[data-name*=" + value + "]").addClass('visible').each(function(i) { $(this).delay(200).slideDown("fast"); }); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h2>sortdata</h2> <input id="searchInput" type="text" value="" placeholder="search" /> <select name="studyselector" id="studyselector"> <option value="All">All news</option> <option value="Cat1">Category 1</option> <option value="Cat2">Category 2</option> <option value="Cat3">Category 3</option> <option value="Cat4">Category 4</option> <option value="Cat5">Category 5</option> <option value="Cat6">Category 6</option> <option value="Cat7">Category 7</option> </select> <hr /> <div id="searchFilterDiv"> <div class="CompanyDirectoryItem search-results-box-item" data-name=" All, Cat1"> <div class="thumb"> <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150"> </div> <div class="news-txt"> <h3><a href="">A news title1</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p> </div> </div> <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat2, Cat5"> <div class="thumb"> <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150"> </div> <div class="news-txt"> <h3><a href="">A news title2</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p> </div> </div> <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat3"> <div class="thumb"> <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150"> </div> <div class="news-txt"> <h3><a href="">A news title3</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p> </div> </div> <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat4"> <div class="thumb"> <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150"> </div> <div class="news-txt"> <h3><a href="">A news title4</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p> </div> </div> <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat5"> <div class="thumb"> <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150"> </div> <div class="news-txt"> <h3><a href="">A news title5</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p> </div> </div> <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat6, Cat1"> <div class="thumb"> <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150"> </div> <div class="news-txt"> <h3><a href="">A news title6</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p> </div> </div> <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat7, Cat3"> <div class="thumb"> <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150"> </div> <div class="news-txt"> <h3><a href="">A news title7+3</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p> </div> </div> <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat7"> <div class="thumb"> <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150"> </div> <div class="news-txt"> <h3><a href="">A news title7</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p> </div> </div> </div>