Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [AJAX] dynamiczny filtr wyników
shpaque
post
Post #1





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


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...

  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. });


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?

  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');


Ten post edytował shpaque 18.04.2020, 03:38:14
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
shpaque
post
Post #2





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


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...

  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 ?>


wlasnei zauwazylem ze skrypty sie ze soba żrą... :/ te oba keyup'y - dziala tylko ten ktory jest nad drugim
Go to the top of the page
+Quote Post

Posty w temacie
- shpaque   [AJAX] dynamiczny filtr wyników   17.04.2020, 21:16:26
- - gitbejbe   [HTML] pobierz, plaintext $(document).re...   18.04.2020, 07:04:23
- - shpaque   Dziękuję - trochę musiałemk -ptrzerobić bo nie dzi...   18.04.2020, 07:22:45
- - gitbejbe   CytatDziękuję - trochę musiałemk -ptrzerobić bo ni...   18.04.2020, 13:53:35
- - shpaque   https://jsfiddle.net/3wj6dv0e/4/   19.04.2020, 05:53:59
- - gitbejbe   https://jsfiddle.net/c0L39q4k/ biblioteka hightli...   19.04.2020, 07:31:09
- - shpaque   no i świetnie zrobiłeś, za co Ci dziękuję ogromnie...   19.04.2020, 10:05:21
- - gitbejbe   Tak jak wskazuje komunikat błędu, nie dodałeś bibl...   19.04.2020, 11:35:25
- - shpaque   no wlasnie to mnie dziwi bo wszedzie jakzdy js jes...   19.04.2020, 13:17:19
- - gitbejbe   bardzo chaotycznie piszesz, ciężko cię zrozumieć. ...   19.04.2020, 14:58:45
- - shpaque   nigdy sienad kropka nie zastanawialem po prostu od...   19.04.2020, 15:55:36
- - gitbejbe   $(function() {}) to krótsza wersja zapisu: ...   19.04.2020, 19:25:12
- - shpaque   wyslalem ci PM jak przeladuje strone konsola jest...   19.04.2020, 20:11:47
- - gitbejbe   dobra, błąd był po stronie biblioteki highlight. S...   19.04.2020, 20:44:53
- - shpaque   ok wyedytowalem skrypt, polaczylem keyup w jedno -...   19.04.2020, 21:00:06
- - gitbejbe   spróbuj jeszcze tak: [HTML] pobierz, plaintext ...   19.04.2020, 22:55:51
- - shpaque   tamte komunikaty zniknely, nawet podczas pisania w...   20.04.2020, 01:06:25
- - gitbejbe   musisz coś samodzielnie ogarnąć, debuguj kod, spra...   20.04.2020, 06:57:56
- - shpaque   ok, skróciłem to maksymalnie, dodałęm toggle żeby ...   20.04.2020, 08:51:41
- - trueblue   Kodif(value === ''){ tu usuń klas...   20.04.2020, 08:54:26


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 14.10.2025 - 21:46