javascript - 搜索过滤器继续搜索所有类别 Jquery

Question

嗨，我是个新手，我有点被困在这里了。我正在下面进行此搜索。

问题是我可以使用选择选项过滤掉类别。但我不能只在选定的类别中搜索。搜索始终查找所有附加有 .visible 的 div。我知道我必须从 div's 中删除不属于所选类别的 .visible，但我没有主意。

有人可以帮我吗？

链接到fiddle

 $("#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>