Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX] dynamiczny filtr wyników
Forum PHP.pl > Forum > Przedszkole
shpaque
17.04.2020, 21:16:26
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"..? smile.gif np na przykladzie dodania klasy "show" i odjecia jej kiedy wyczyscimy $this...

[HTML] pobierz, plaintext 
  1. $(document).ready(function() {
  2.         $('#search').on('keyup', function() {
  3.           var value = $(this).val().toLowerCase();
  4.           $('.table-body tr').filter(function() {
  5.             $('ul', this).addClass('show');
  6.             $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
  7.           });
  8.         });
  9.       });
[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 
  1. function highLight(input, node) {
  2.         $(input).on('keyup', function() {
  3.           var searchValue = $(input).val();
  4.           var str = $(node).html();
  5.           if (str.includes(searchValue) == true) {
  6.             str = str.replace(searchValue, '<span class="highlight">' + searchValue + '</span>');
  7.           }
  8.           $(node).html(str);
  9.         });
  10.       }
  11.       highLight('#search', '.table-body tr td ul li');
[HTML] pobierz, plaintext
gitbejbe
18.04.2020, 07:04:23 
[HTML] pobierz, plaintext 
  1. $(document).ready(function() {
  2.         $('#search').on('keyup', function() {
  3.          var isEmpty = !$(this).length;        
  4.          var value = $(this).val().toLowerCase();
  5.  
  6.          if(!isEmpty){
  7.              $('.table-body tr ul').addClass('show');
  8.           }
  9.          else {
  10.              $('.table-body tr ul').removeClass('show');
  11.          }
  12.         });
  13.       });
  14.  
[HTML] pobierz, plaintext
shpaque
18.04.2020, 07:22:45
Dziękuję - trochę musiałemk -ptrzerobić bo nie działało ale przynajmniej połączyłem oba skrypty i teraz jest super:

[HTML] pobierz, plaintext 
  1. $(document).ready(function() {
  2.         $('#search').on('keyup', function() {
  3.           var value = $(this).val().toLowerCase();
  4.           if ($(this).text().toLowerCase().indexOf(value) > -1) {
  5.             $('.table-body tr td').addClass('collapsed');
  6.             $('.table-body tr td ul').removeClass('show');
  7.           }
  8.           else {
  9.             $('.table-body tr td').removeClass('collapsed');
  10.             $('.table-body tr td ul').addClass('show');
  11.           }
  12.         });
  13.       });
[HTML] pobierz, plaintext


pozostaje problem już tylko drugiej części... już nawet tak kombinuję ale to i tak na nic:

[HTML] pobierz, plaintext 
  1. $('#search').on('keyup', function() {
  2.           var searchValue = $('#search').val();
  3.           $('.table-body tr td ul').children().each(function() {
  4.             var node = $(this);
  5.             var str = node.html();
  6.             if (node.html().includes(searchValue) === true) {
  7.               node.html(node.html().replace(searchValue, '<span class="highlight">' + searchValue + '</span>'));
  8.             }
  9.           });
  10.         });
[HTML] pobierz, plaintext


nejlepiej byloby dodac tego highlight'a do skryptu powyżej (czyli if i else z show), ale tam cos musi byc z API, bo wywala blad ze $(...).highlight is not a function
gitbejbe
18.04.2020, 13:53:35
Cytat
Dziękuję - trochę musiałemk -ptrzerobić bo nie działało ale przynajmniej połączyłem oba skrypty i teraz jest super:


jasne że musiałeś przerobić, przecież nie zrobię tego za Ciebie ; ) wystarczyło dodać prosty warunek, resztę ogarnąłeś i o to chodziło.

jeśli chodzi o highlightjs wydaje mi się że zupełnie źle tego używasz, wrzuć to co chcesz zrobić na jakiś edytor online np: https://jsfiddle.net/
shpaque
19.04.2020, 05:53:59
https://jsfiddle.net/3wj6dv0e/4/
gitbejbe
19.04.2020, 07:31:09
https://jsfiddle.net/c0L39q4k/

biblioteka hightlight:
https://johannburkard.de/blog/programming/j...ery-plugin.html
kod: https://johannburkard.de/resources/Johann/j....highlight-5.js

wyłączyłem Ci jeszcze autocomplite w tym input search
shpaque
19.04.2020, 10:05:21
no i świetnie zrobiłeś, za co Ci dziękuję ogromnie, na jsfiddle działa jak miało działać, tylko pytanie teraz dlaczego u mnie na stronie wiecznie wywala mi konsole:

$(...).removeHighlight is not a function i $(...).highlight is not a function?

dokładnei co takiego:

admin.php?page=tasks:861 Uncaught TypeError: $(...).removeHighlight is not a function
at HTMLInputElement.<anonymous> (admin.php?page=tasks:861)
at HTMLInputElement.dispatch (jquery-3.3.1.min.js?2680:2)
at HTMLInputElement.y.handle (jquery-3.3.1.min.js?2680:2)
(anonymous) @ admin.php?page=tasks:861
dispatch @ jquery-3.3.1.min.js?2680:2
y.handle @ jquery-3.3.1.min.js?2680:2
gitbejbe
19.04.2020, 11:35:25
Tak jak wskazuje komunikat błędu, nie dodałeś biblioteki którą podałem tobie w linku.

https://johannburkard.de/resources/Johann/j....highlight-5.js

pobierz to i dodaj do pliku tak jak dodajesz inne biblioteki js. Pamiętaj aby dodać to poniżej jquery.
shpaque
19.04.2020, 13:17:19
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 
  1. <script src="./js/jquery-3.3.1.min.js"></script>
  2. <script src="./js/jquery.highlight.js"></script>
  3. <link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
  4. <script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
  5.  
  6. ...
  7.  
  8. ...
  9.             <div class="row align-self-center">
  10.               <div class="col">
  11.                 <div class="form-group text-center">
  12.                   <label>Wyszukiwarka / Filtrowanie wyników</label>
  13.                   <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" />
  14.                 </div>
  15.               </div>
  16.             </div>
  17. ...
  18.  
  19.       <script type="text/javascript">
  20.       $(document).ready(function() {
  21.         $('#search').on('keyup', function() {
  22.           var value = $(this).val().toLowerCase();
  23.           if ($(this).text().toLowerCase().indexOf(value) > -1) {
  24.             $('.table-body tr td').addClass('collapsed');
  25.             $('.table-body tr td ul').removeClass('show');
  26.           }
  27.           else {
  28.             $('.table-body tr td').removeClass('collapsed');
  29.             $('.table-body tr td ul').addClass('show');
  30.           }
  31.         });
  32.       });
  33.       </script>
  34.  
  35.       <script type="text/javascript">
  36.       $(function() {
  37.         $('#search').on('keyup', function() {
  38.           var searchValue = $(this).val();
  39.           $('.table-body').removeHighlight();
  40.           $('.table-body tr td ul').children().each(function() {
  41.             $(this).highlight(searchValue);
  42.           });
  43.         });
  44.       });
  45.       </script>
  46.  
  47.       <script type="text/javascript">
  48.       function showButton(id) {
  49.         // Jeśli jakikolwiek checkbox jest zaznaczony
  50.         if ($('input[type="checkbox"]').is(':checked')) {
  51.           $('#new-test-from-tasks').fadeIn();
  52.           $('#new-test-button').val('Stwórz test z zaznaczonych pytań (' + $('input[type="checkbox"]:checked').length + ')');
  53.         }
  54.         else {$('#new-test-from-tasks').fadeOut();}
  55.         // Jeśli konkretny checkbox jest zaznaczony
  56.         if ($('#submit-' + id).is(':checked')) {
  57.           $('#table-row-' + id).css('background', 'var(--yellow)');
  58.         }
  59.         else {
  60.           $('#table-row-' + id).css('background', '#efefef');
  61.         }
  62.       }
  63.       </script>
  64.     <?php endif ?>
[HTML] pobierz, plaintext


wlasnei zauwazylem ze skrypty sie ze soba żrą... :/ te oba keyup'y - dziala tylko ten ktory jest nad drugim
gitbejbe
19.04.2020, 14:58:45
bardzo chaotycznie piszesz, ciężko cię zrozumieć.

wiesz jaka jest różnica pomiędzy "./" a "/" na początku ścieżki do pliku ? Poczytaj o tym bo to bardzo ważne abyś to zrozumiał. W każdym razie usuń kropkę i podawaj ścieżki w ten sposób, albo w absolutny (wraz z domeną).

<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/jquery.highlight.js"></script>


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


to połącz w jedno:
Kod
$(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);
          });
        });
      });
shpaque
19.04.2020, 15:55:36
nigdy sienad kropka nie zastanawialem po prostu od kiedy zaczalem stosowac czesciowe linki to zawze daje z kropka i wszystko chodzi (podejrzewam ze "./" oznacza katalog nadrzedny zupelnie czyli adres golej domeny w tym przypadku).
Natomiast usuniecie kropki lub nawet kropki i slasha nic nie zmienia. polaczenie skryptow rozniez nic nie da bo jeden jest document ready a drugi nie...

nawet podajac link absolutny nic to nie daje...
gitbejbe
19.04.2020, 19:25:12
$(function() {})

to krótsza wersja zapisu:

$(document).ready(function() {})

gdzieś robisz głupi błąd. Czyli stanęło na tym że nadal nie wczytuje Ci tej biblioteki highlight ?

Wklej wszystko co pokazuje Ci konsole po przeładowaniu strony.

Oddzielnie wklej to co pokaże Ci konsole jak zaczniesz pisać w inpucie.
shpaque
19.04.2020, 20:11:47
wyslalem ci PM

jak przeladuje strone konsola jest czysciutka i pusciutka, problem zaczyna sie wpisujac w inputa search. od razu wyskakuje w konsoli zestaw ktory wkleilem powyzej, natomiast trugi skrypt oparty na keyup (czyli chowanie i pokazywanie collapse) dziala bez zarzutu.

i na pewno gdzieś robię głupi błąd bo to przecież cudnie chodzi na jsfiddle...
gitbejbe
19.04.2020, 20:44:53
dobra, błąd był po stronie biblioteki highlight. Skrypt powinien być owinięty w ;(function($){ ... }(jQuery)) a nie jest, błąd Twórcy.
shpaque
19.04.2020, 21:00:06
ok wyedytowalem skrypt, polaczylem keyup w jedno - ponizej

[HTML] pobierz, plaintext 
  1. $(function() {
  2.         $('#search').on('keyup', function() {
  3.           var value = $(this).val().toLowerCase();
  4.           if ($(this).text().toLowerCase().indexOf(value) > -1) {
  5.             $('.table-body tr td').addClass('collapsed');
  6.             $('.table-body tr td ul').removeClass('show');
  7.           }
  8.           else {
  9.             $('.table-body tr td').removeClass('collapsed');
  10.             $('.table-body tr td ul').addClass('show');
  11.           }
  12.         });
  13.  
  14.         var searchValue = $(this).val();
  15.         $('.table-body').removeHighlight();
  16.         $('.table-body tr td ul').children().each(function() {
  17.           $(this).highlight(searchValue);
  18.         });
  19.       });
[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
gitbejbe
19.04.2020, 22:55:51
spróbuj jeszcze tak:

[HTML] pobierz, plaintext 
  1. (function($){
  2.     $('#search').on('keyup', function() {
  3.           var value = $(this).val().toLowerCase();
  4.           if ($(this).text().toLowerCase().indexOf(value) > -1) {
  5.             $('.table-body tr td').addClass('collapsed');
  6.             $('.table-body tr td ul').removeClass('show');
  7.           }
  8.           else {
  9.             $('.table-body tr td').removeClass('collapsed');
  10.             $('.table-body tr td ul').addClass('show');
  11.           }
  12.         });
  13.  
  14.         var searchValue = $(this).val();
  15.         $('.table-body').removeHighlight();
  16.         $('.table-body tr td ul').children().each(function() {
  17.           $(this).highlight(searchValue);
  18.         });
  19. })(jQuery);
[HTML] pobierz, plaintext
shpaque
20.04.2020, 01:06:25
tamte komunikaty zniknely, nawet podczas pisania w inpucie nie wyskakuja (ale skrypt nie wykonuje sie) natomiast tym razem od razu pojawia sie:

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
at w.fn.init.val (jquery-3.3.1.min.js:2)
at admin.php?page=tasks:3251
at admin.php?page=tasks:3256

...co wiecej zauwazylem ze poczatkowo ta pierwsza czesc skryptu filtrowala na zasadzie ze kiedy nie ma ciagu znakow w tresci (po wpisaniu jakich kolwiek znakow w input) to collpasuje ten tr, a teraz nawet jak nie ma wszystkie sa rozwiniete.
gitbejbe
20.04.2020, 06:57:56
musisz coś samodzielnie ogarnąć, debuguj kod, sprawdzaj co zawierają zmienne i wpisuj komunikaty błedów do google. Ucz się a nie tylko wklepuj.

https://jsfiddle.net/eob794dL/
shpaque
20.04.2020, 08:51:41
ok, skróciłem to maksymalnie, dodałęm toggle żeby mi się wyłączały trki kiedy nie ma w nich znakow z searcha i wyglada to jak ponizej i swietnie dziala poza powrotem do czystego inputa smile.gif czyli jak tu zmienic teraz zeby w momencie wyczyszczenia inputa wszystkie ul bylo bez klasy show

[HTML] pobierz, plaintext 
  1. (function($) {
  2.         $('#search').on('keyup', function() {
  3.           var value = $(this).val().toLowerCase();
  4.           $('.table-body tr').filter(function() {
  5.             $('ul', this).addClass('show');
  6.             $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
  7.             $(this).removeHighlight();
  8.             $(this).children().highlight(value);
  9.           });
  10.         }).off('keyup', function() {
  11.           $('.table-body tr ul').removeClass('show');
  12.         });
  13.       })(jQuery);
[HTML] pobierz, plaintext


albo zrobic to jak linijka 6. z toggle tylko nie wime jak analogie tu zlapac smile.gif

@EDIT

ok zrobilem to ifem na koncu i wszystko teraz jest jak chcialem - tylko jeszcze pytanie koncowe czy to tak moze byc czy inaczej powinienem to rozwiazac?

[HTML] pobierz, plaintext 
  1. (function($) {
  2.         $('#search').on('keyup', function() {
  3.           var value = $(this).val().toLowerCase();
  4.           $('.table-body tr').filter(function() {
  5.             $('ul', this).addClass('show');
  6.             $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
  7.             $(this).removeHighlight();
  8.             $(this).children().highlight(value);
  9.           });
  10.           if (value === '') {
  11.             $('.table-body tr ul').removeClass('show');
  12.           }
  13.         });
  14.       })(jQuery);
[HTML] pobierz, plaintext
trueblue
20.04.2020, 08:54:26
Kod
if(value === ''){
tu usuń klasy
}
else{
tu kod z highlight
}
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.