Блог

Главная - Вопросы по программированию - Поиск Jquery не работает должным образом в аккордеоне?

Поиск Jquery не работает должным образом в аккордеоне?

#javascript #html #jquery

Вопрос:

Здесь, если текст поиска совпадает с текстом <a> tag , я хочу скрыть другие несопоставимые элементы.

Здесь происходит следующее: если искомый ввод не совпадает ни с чем, то исчезает только аккордеон, в противном случае ничего не происходит.

Я хочу отобразить только аккордеон, соответствующий искомому тексту, и скрыть его .Как я могу сделать это здесь ?

скрипт

 jQuery("#query").keyup(function () {
    var filter = jQuery(this).val();
    jQuery("#accordion").each(function () {
        if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {
            jQuery(this).hide();
        } else {
            jQuery(this).show()
        }
    });
});

HTML

 <input type="text" id="query" >

   <div class="crollable">
      <div id="accordion">
         <div class="card">   
             <div class="card-header">
                <a data-toggle="collapse" data-target="#collapse1" aria-expanded="false">Text</a>
               </div>
            <div id="collapse1" class="collapse" data-parent="#accordion">
           <div class="card-body">
          <div class="col-3">value</div>
          </div>

         <div class="card">   
             <div class="card-header">
                <a data-toggle="collapse2" data-target="#collapse1" aria-expanded="false">Text2</a>
               </div>
            <div id="collapse2" class="collapse" data-parent="#accordion">
           <div class="card-body">
          <div class="col-3">value2</div>
          </div>
        </div>

Ответ №1:

В вашей html структуре отсутствуют некоторые теги . Затем вы можете выполнить итерацию по своему [data-toggle] элементу и, если найдено совпадение, скрыть closest карту от этих элементов.

Демонстрационный код :

 jQuery("#query").keyup(function() {
  var filter = jQuery(this).val().toLowerCase(); //get text
  //loop through `a` tag
  jQuery("#accordion [data-toggle]").each(function() {
    if (jQuery(this).text().toLowerCase().trim().indexOf(filter) < 0) {
      jQuery(this).closest(".card").hide(); //hide closest card
    } else {
      jQuery(this).closest(".card").show()
    }
  });
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="text" id="query">

<div class="crollable">
  <div id="accordion">
    <div class="card">
      <div class="card-header">
        <a data-toggle="collapse" data-target="#collapse1" aria-expanded="false">Text</a>
      </div>
      <div id="collapse1" class="collapse" data-parent="#accordion">
        <div class="card-body">
          <div class="col-3">value</div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-header">
        <a data-toggle="collapse2" data-target="#collapse1" aria-expanded="false">Text2</a>
      </div>
      <div id="collapse2" class="collapse" data-parent="#accordion">
        <div class="card-body">
          <div class="col-3">value2</div>
        </div>
      </div>
    </div>
  </div>
</div>

Ответ №2:

Это должно быть легко. это небольшая ошибка, которую ты совершил.

 jQuery("#query").keyup(function () {
    var filter = jQuery(this).val().toLowerCase();
    // Search function return 0 when it dose not find anything.
    // and the Regexp should be using g instead of i so the problem with casesensetive should be solved.
    jQuery("#accordion .card-body .col-3").each(function () {
        var text = jQuery(this).text().toLowerCase();
        if (text.indexOf(filter) == -1) {
            jQuery(this).hide();
        } else {
            jQuery(this).show();
        }
    });
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="query" >

   <div class="crollable">
      <div id="accordion">
         <div class="card">   
             <div class="card-header">
                <a data-toggle="collapse" data-target="#collapse1" aria-expanded="false">Text</a>
               </div>
            <div id="collapse1" class="collapse" data-parent="#accordion">
           <div class="card-body">
          <div class="col-3">value</div>
          </div>

         <div class="card">   
             <div class="card-header">
                <a data-toggle="collapse2" data-target="#collapse1" aria-expanded="false">Text2</a>
               </div>
            <div id="collapse2" class="collapse" data-parent="#accordion">
           <div class="card-body">
          <div class="col-3">value2</div>
          </div>
        </div>

Комментарии:

1. попробовал это сейчас, искомый ввод ничего не соответствует

2. Обновил мой ответ, вы ищете в неправильном разделе. вы должны фильтровать col-3 то, что существует внутри accordion . Я тоже переоделся search в indexOf . Попробуйте войти value2 , и вы увидите изменения

3. «это небольшая ошибка, которую вы совершили». но вы не объяснили простым английским языком, в чем заключалась эта ошибка. Ответы только на код не так полезны.

4. Если вы увидите мой комментарий поверх вашего, вы поймете, какую ошибку он совершил. А еще он неправильно использовал поиск, вот и все.

Метки: