Question

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

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

有人可以在这里帮助我吗？

链接到fiddle

div's

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

Answer 1

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

您可以从所有visible中删除search-results-box-item类，然后使用.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 e.g.
//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>

搜索过滤器会继续搜索所有类别的Jquery

2 个答案: