[AJAX] dynamiczny filtr wyników Opcje

[shpaque]

Witam serdecznie, na bazie skryptu znalezionego chcialbym go troche rozbdowac i znow wchodzi w gre sytuacja kiedy dziala wszystko podczas wpisywania tekstu w inputa, ale jak zrobic zeby wszystko sie wylaczylo kiedy np usune caly tekst z inputa (czyli kiedy filter() to ok a kiedy "niefilter"..? (IMG:style_emoticons/default/smile.gif) np na przykladzie dodania klasy "show" i odjecia jej kiedy wyczyscimy $this...

[HTML] pobierz, plaintext 
$(document).ready(function() {
        $('#search').on('keyup', function() {
          var value = $(this).val().toLowerCase();
          $('.table-body tr').filter(function() {
            $('ul', this).addClass('show');
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
          });
        });
      });
[HTML] pobierz, plaintext 

i druga rzecz - znalazłem skrypt highlihjt.js do dynamicznego podswietlania wartosci w inpucie search, ale sadze ze krocej i latwiej mogloby to zadzialac jak w wycinku ponizej, tylko jak to zrobic zeby dobrze dzialalo normalnie?

[HTML] pobierz, plaintext 
function highLight(input, node) {
        $(input).on('keyup', function() {
          var searchValue = $(input).val();
          var str = $(node).html();
          if (str.includes(searchValue) == true) {
            str = str.replace(searchValue, '<span class="highlight">' + searchValue + '</span>');
          }
          $(node).html(str);
        });
      }
      highLight('#search', '.table-body tr td ul li');
[HTML] pobierz, plaintext 

Ten post edytował shpaque 18.04.2020, 03:38:14

[shpaque]

no wlasnie to mnie dziwi bo wszedzie jakzdy js jest ok a ten nie... zmienilem jego nazwe (na jquery.highlight.js) i wrzucam z serwera strony (plik php jest w sciezce ./php/plik.php a js w ./js/jquery, ale plik php jest includowany z pliku na ./ wiec sciezka jest jak z zewnatrz inne skrypty sa ladowane - ten nie...

[HTML] pobierz, plaintext 
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/jquery.highlight.js"></script>
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
 
...
 
...
            <div class="row align-self-center">
              <div class="col">
                <div class="form-group text-center">
                  <label>Wyszukiwarka / Filtrowanie wyników</label>
                  <input type="text" class="form-control text-center" id="search" name="search" autocomplete="off" placeholder="Wpisz słowa kluczowe, po których chcesz zawęzić wyniki" />
                </div>
              </div>
            </div>
...
 
      <script type="text/javascript">
      $(document).ready(function() {
        $('#search').on('keyup', function() {
          var value = $(this).val().toLowerCase();
          if ($(this).text().toLowerCase().indexOf(value) > -1) {
            $('.table-body tr td').addClass('collapsed');
            $('.table-body tr td ul').removeClass('show');
          }
          else {
            $('.table-body tr td').removeClass('collapsed');
            $('.table-body tr td ul').addClass('show');
          }
        });
      });
      </script>
 
      <script type="text/javascript">
      $(function() {
        $('#search').on('keyup', function() {
          var searchValue = $(this).val();
          $('.table-body').removeHighlight();
          $('.table-body tr td ul').children().each(function() {
            $(this).highlight(searchValue);
          });
        });
      });
      </script>
 
      <script type="text/javascript">
      function showButton(id) {
        // Jeśli jakikolwiek checkbox jest zaznaczony
        if ($('input[type="checkbox"]').is(':checked')) {
          $('#new-test-from-tasks').fadeIn();
          $('#new-test-button').val('Stwórz test z zaznaczonych pytań (' + $('input[type="checkbox"]:checked').length + ')');
        }
        else {$('#new-test-from-tasks').fadeOut();}
        // Jeśli konkretny checkbox jest zaznaczony
        if ($('#submit-' + id).is(':checked')) {
          $('#table-row-' + id).css('background', 'var(--yellow)');
        }
        else {
          $('#table-row-' + id).css('background', '#efefef');
        }
      }
      </script>
    <?php endif ?>
[HTML] pobierz, plaintext 

wlasnei zauwazylem ze skrypty sie ze soba żrą... :/ te oba keyup'y - dziala tylko ten ktory jest nad drugim