Создание окна поиска для фильтрации текста и его сущностей

Question

У меня есть список опций флажков, ниже приведен фрагмент кода из моего Laravel блейда.

<!--start of major list-->
                      <div class="tag-majors" >
                        <p class="font-weight-bold text-xs-center">
                          Major:
                        </p>
                        <div class="" style="max-height:300px;overflow:hidden;overflow-y:auto;">
                        <input id="myInput" type="text" placeholder="Search.."> <!--filter search box-->
                        <div id="testmajor"> <!--div for filter results-->
                          <div class="m-a-05">
                            <label class="c-input c-checkbox">
                              <input type="checkbox" class="majors-all">
                              <span class="c-indicator"></span>
                              All
                            </label>
                          </div>
                          @foreach ($majors as $key => $major)
                            <div class="m-a-05">
                              <label class="c-input c-checkbox">
                                <input type="checkbox" name="majors[]" value="{{ $major->id }}">
                                <span class="c-indicator"></span>
                                {{ $major->name }}
                              </label>
                            </div>
                        @endforeach
                        </div>
                      </div>
 <!--end of major list-->

Моя цель - создать поисковый фильтр для поиска по основным предметам вместо того, чтобы искать весь путь до конца. В настоящее время у меня есть это.

Мне удалось заставить окно поиска работать, но когда я что-то ищу, я получаю только текст, который должен быть возвращен и флажок пропадает.

Это моя функция поиска:

          $(document).ready(function(){
            $("#myInput").on("keyup", function() {
              var value = $(this).val().toLowerCase();
              $("#testmajor *").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
              });
            });
          });

Я искал StackOverflow и другие источники пытаются выяснить способ включить флажок вместе, и я все еще пытаюсь. Я надеюсь получить некоторую информацию о том, как я могу решить эту проблему. Спасибо.

Answer 1

После нескольких часов работы над этим я наконец понял это. Решение оказалось довольно простым. Для тех, у кого такая же проблема, вот мое решение.

HTML:

<!--start of major list-->
                      <div class="tag-majors" >
                        <p class="font-weight-bold text-xs-center">
                          Major:
                        </p>
                        <div class="" style="max-height:300px;overflow:hidden;overflow-y:auto;">
                        <input id="myInput" type="text" placeholder="Search.."> <!--filter search box-->
                        <div class="testmajor"> <!--div for filter results-->
                          <div class="m-a-05">
                            <label class="c-input c-checkbox">
                              <input type="checkbox" class="majors-all">
                              <span class="c-indicator"></span>
                              All
                            </label>
                          </div>
                          @foreach ($majors as $key => $major)
                            <div class="m-a-05">
                              <label class="c-input c-checkbox">
                                <input type="checkbox" name="majors[]" value="{{ $major->id }}">
                                <span class="c-indicator"></span>
                                {{ $major->name }}
                              </label>
                            </div>
                        @endforeach
                        </div>
                      </div>
 <!--end of major list-->

JQuery:

  $(document).ready(function(){
          $('#myInput').keyup(function(){

           // Search text
           var text = $(this).val().toLowerCase();

           // Hide all content class element
          $('.testmajor .m-a-05').hide();

         // Search 
         $('.testmajor .c-input').each(function(){

        if($(this).text().toLowerCase().indexOf(""+text+"") != -1 ){
        $(this).closest('.m-a-05').show();
            }
        });
    });
});

Answer 2

Существует два подхода к этому:

1. Вместо переключения вы можете использовать $ ('# selector'). Append (). html (// checkbox HTML и код данных здесь) Таким образом, ваши отфильтрованные данные будут добавлены. Но вам нужно очистить, прежде чем начать новый поиск. Звучит сложно, но может работать.

2. Вы можете добавить ключ, определяющий c класс, к верхнему элементу div $majors. Затем функция .filter () может скрыть остаток от checkbox div и отображать их согласно отфильтрованным ключам.