Отображение элементов на основе поиска

Question

Я бы хотел, чтобы элементы .box отображались / скрывались на основе слов, которые ищет пользователь, поэтому, например, если пользователь вводит «Title2 Title1», потому что эти слова существуют внутри первого блока, и они останутся видимыми с переименование .box скрытие элементов. Весь текст в элементах .box должен быть доступен для поиска, а не только в элементе .title.

Ниже показано, как далеко я дошел. Это почти там, но это не совсем работает, как мы надеялись.

Любая помощь будет отличной.

Большое спасибо.

<input placeholder="Search" id="search" type="text" />

<div class="box">
   <div class="title">Box Title1</div>
   <div class="content">
      Box title one content
   </div>
</div>
<div class="box">
   <div class="title">Box Title2</div>
   <div class="content">
      Box title two content
   </div>
</div>
<div class="box">
   <div class="title">Box Title3</div>
   <div class="content">
      Box title three content
   </div>
</div>

<script>
$("#search").on("input", function () {

   var search = $(this).val();

   if (search !== "") {

      var searchArray = search.split(" ");

      searchArray.forEach(function(searchWord) {

         $(".box").each(function () {

            if($(this).is(':contains('+ searchWord +')')) {
               $(this).show();
            } else {
               $(this).hide();
            }

         });

   });

   } else {
      $(".box").show();
   }

});
</script>

Answer 1

Вам нужно использовать другой метод поиска. :contains не работает, как вы ожидаете. Рассмотрим следующий пример.

$(function() {
  function filter(e) {
    var term = $(e.target).val();
    if (term.length < 3) {
      $(".box").show();
      return;
    }
    $(".box").each(function(i, el) {
      if ($(".content", el).text().indexOf(term) >= 0) {
        $(el).show();
      } else {
        $(el).hide();
      }
    });
  }
  $("#search").keyup(filter);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input placeholder="Search" id="search" type="text" />

<div class="box">
  <div class="title">Box Title1</div>
  <div class="content">Box title one content</div>
</div>
<div class="box">
  <div class="title">Box Title2</div>
  <div class="content">Box title two content</div>
</div>
<div class="box">
  <div class="title">Box Title3</div>
  <div class="content">Box title three content</div>
</div>

Так, например, если введено on, фильтрация не выполняется. Если введено one, скрипт будет искать внутри класса content каждого box, и если в тексте будет найдено one, в противном случае будет показано, что он скрыт. Если пользователь очищает свой поиск, отображаются все элементы.

Answer 2

Скрыть все поля перед повторением, а затем показывать только при совпадении любых слов:

$("#search").on("input", function () {

   var search = $(this).val();

   if (search !== "") {

      var searchArray = search.split(" ");

      // Hide all .box
      $(".box").each(function () {
        $(this).hide();
      })
      
      searchArray.forEach(function(searchWord) {         
         $(".box").each(function () {
            if($(this).is(':contains('+ searchWord +')') ) {
               $(this).show();
            }

         });

   });

   } else {
      $(".box").show();
   }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input placeholder="Search" id="search" type="text" />

<div class="box">
   <div class="title">Box Title1</div>
   <div class="content">
      Box title one content
   </div>
</div>
<div class="box">
   <div class="title">Box Title2</div>
   <div class="content">
      Box title two content
   </div>
</div>
<div class="box">
   <div class="title">Box Title3</div>
   <div class="content">
      Box title three content
   </div>
</div>

Answer 3

L oop через все .box с и, используя сопоставление с регулярным выражением, проверьте соответствие заголовка или содержимого поисковому запросу. Показать все соответствующие поля и спрятать все остальные

Я также поиграл здесь

$("#search").on("input", function () {

      var searchables=$('.box');
      console.log(searchables)
      var query=$(this).val();
      searchables.each(function(i,item){

      var title=$(item).find('.title').text();     
      var content=$(item).find('.content').text();
      var rgx=new RegExp(query,'gi');

      if(rgx.test(title) || rgx.test(content))
      {
                $(item).show();               
      }
      else
      {
                $(item).hide(); 
      }


    })
})