搜索过滤器继续搜索所有类别的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>