[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]

ok wyedytowalem skrypt, polaczylem keyup w jedno - ponizej

[HTML] pobierz, plaintext 
$(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');
          }
        });
 
        var searchValue = $(this).val();
        $('.table-body').removeHighlight();
        $('.table-body tr td ul').children().each(function() {
          $(this).highlight(searchValue);
        });
      });
[HTML] pobierz, plaintext 

roznica jest taka ze teraz juz po zaladowaniu strony wyskakuje podwojnie konsola:

jquery-3.3.1.min.js:2 jQuery.Deferred exception: $(...).removeHighlight is not a function TypeError: $(...).removeHighlight is not a function
at HTMLDocument.<anonymous> (https://test.coloplus.pl/admin.php?page=tasks:3252:26)
at l (https://test.coloplus.pl/js/jquery-3.3.1.min.js:2:29375)
at c (https://test.coloplus.pl/js/jquery-3.3.1.min.js:2:29677) undefined
w.Deferred.exceptionHook @ jquery-3.3.1.min.js:2
c @ jquery-3.3.1.min.js:2
setTimeout (async)
(anonymous) @ jquery-3.3.1.min.js:2
u @ jquery-3.3.1.min.js:2
fireWith @ jquery-3.3.1.min.js:2
fire @ jquery-3.3.1.min.js:2
u @ jquery-3.3.1.min.js:2
fireWith @ jquery-3.3.1.min.js:2
ready @ jquery-3.3.1.min.js:2
_ @ jquery-3.3.1.min.js:2
jquery-3.3.1.min.js:2 Uncaught TypeError: $(...).removeHighlight is not a function
at HTMLDocument.<anonymous> (admin.php?page=tasks:3252)
at l (jquery-3.3.1.min.js:2)
at c (jquery-3.3.1.min.js:2)
(anonymous) @ admin.php?page=tasks:3252
l @ jquery-3.3.1.min.js:2
c @ jquery-3.3.1.min.js:2
setTimeout (async)
w.readyException @ jquery-3.3.1.min.js:2
(anonymous) @ jquery-3.3.1.min.js:2
l @ jquery-3.3.1.min.js:2
c @ jquery-3.3.1.min.js:2
setTimeout (async)
(anonymous) @ jquery-3.3.1.min.js:2
u @ jquery-3.3.1.min.js:2
fireWith @ jquery-3.3.1.min.js:2
fire @ jquery-3.3.1.min.js:2
u @ jquery-3.3.1.min.js:2
fireWith @ jquery-3.3.1.min.js:2
c @ jquery-3.3.1.min.js:2
setTimeout (async)
(anonymous) @ jquery-3.3.1.min.js:2
u @ jquery-3.3.1.min.js:2
fireWith @ jquery-3.3.1.min.js:2
fire @ jquery-3.3.1.min.js:2
u @ jquery-3.3.1.min.js:2
fireWith @ jquery-3.3.1.min.js:2
ready @ jquery-3.3.1.min.js:2
_ @ jquery-3.3.1.min.js:2