[AJAX] dynamiczny filtr wyników |
[AJAX] dynamiczny filtr wyników |
17.04.2020, 21:16:26
Post
#1
|
|
Grupa: Zarejestrowani Postów: 651 Pomógł: 3 Dołączył: 31.01.2011 Skąd: Warszawa Ostrzeżenie: (10%) |
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"..? np na przykladzie dodania klasy "show" i odjecia jej kiedy wyczyscimy $this...
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?
Ten post edytował shpaque 18.04.2020, 03:38:14 |
|
|
18.04.2020, 07:04:23
Post
#2
|
|
Grupa: Zarejestrowani Postów: 515 Pomógł: 63 Dołączył: 27.08.2012 Ostrzeżenie: (0%) |
|
|
|
18.04.2020, 07:22:45
Post
#3
|
|
Grupa: Zarejestrowani Postów: 651 Pomógł: 3 Dołączył: 31.01.2011 Skąd: Warszawa Ostrzeżenie: (10%) |
Dziękuję - trochę musiałemk -ptrzerobić bo nie działało ale przynajmniej połączyłem oba skrypty i teraz jest super:
pozostaje problem już tylko drugiej części... już nawet tak kombinuję ale to i tak na nic:
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 Ten post edytował shpaque 18.04.2020, 07:57:53 |
|
|
18.04.2020, 13:53:35
Post
#4
|
|
Grupa: Zarejestrowani Postów: 515 Pomógł: 63 Dołączył: 27.08.2012 Ostrzeżenie: (0%) |
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/ Ten post edytował gitbejbe 18.04.2020, 17:24:36 |
|
|
19.04.2020, 05:53:59
Post
#5
|
|
Grupa: Zarejestrowani Postów: 651 Pomógł: 3 Dołączył: 31.01.2011 Skąd: Warszawa Ostrzeżenie: (10%) |
|
|
|
19.04.2020, 07:31:09
Post
#6
|
|
Grupa: Zarejestrowani Postów: 515 Pomógł: 63 Dołączył: 27.08.2012 Ostrzeżenie: (0%) |
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 Ten post edytował gitbejbe 19.04.2020, 07:35:13 |
|
|
19.04.2020, 10:05:21
Post
#7
|
|
Grupa: Zarejestrowani Postów: 651 Pomógł: 3 Dołączył: 31.01.2011 Skąd: Warszawa Ostrzeżenie: (10%) |
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 |
|
|
19.04.2020, 11:35:25
Post
#8
|
|
Grupa: Zarejestrowani Postów: 515 Pomógł: 63 Dołączył: 27.08.2012 Ostrzeżenie: (0%) |
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. |
|
|
19.04.2020, 13:17:19
Post
#9
|
|
Grupa: Zarejestrowani Postów: 651 Pomógł: 3 Dołączył: 31.01.2011 Skąd: Warszawa Ostrzeżenie: (10%) |
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...
wlasnei zauwazylem ze skrypty sie ze soba żrą... :/ te oba keyup'y - dziala tylko ten ktory jest nad drugim |
|
|
19.04.2020, 14:58:45
Post
#10
|
|
Grupa: Zarejestrowani Postów: 515 Pomógł: 63 Dołączył: 27.08.2012 Ostrzeżenie: (0%) |
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); }); }); }); Ten post edytował gitbejbe 19.04.2020, 15:06:30 |
|
|
19.04.2020, 15:55:36
Post
#11
|
|
Grupa: Zarejestrowani Postów: 651 Pomógł: 3 Dołączył: 31.01.2011 Skąd: Warszawa Ostrzeżenie: (10%) |
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... |
|
|
19.04.2020, 19:25:12
Post
#12
|
|
Grupa: Zarejestrowani Postów: 515 Pomógł: 63 Dołączył: 27.08.2012 Ostrzeżenie: (0%) |
$(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. |
|
|
19.04.2020, 20:11:47
Post
#13
|
|
Grupa: Zarejestrowani Postów: 651 Pomógł: 3 Dołączył: 31.01.2011 Skąd: Warszawa Ostrzeżenie: (10%) |
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... |
|
|
19.04.2020, 20:44:53
Post
#14
|
|
Grupa: Zarejestrowani Postów: 515 Pomógł: 63 Dołączył: 27.08.2012 Ostrzeżenie: (0%) |
dobra, błąd był po stronie biblioteki highlight. Skrypt powinien być owinięty w ;(function($){ ... }(jQuery)) a nie jest, błąd Twórcy.
|
|
|
19.04.2020, 21:00:06
Post
#15
|
|
Grupa: Zarejestrowani Postów: 651 Pomógł: 3 Dołączył: 31.01.2011 Skąd: Warszawa Ostrzeżenie: (10%) |
ok wyedytowalem skrypt, polaczylem keyup w jedno - ponizej
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 |
|
|
19.04.2020, 22:55:51
Post
#16
|
|
Grupa: Zarejestrowani Postów: 515 Pomógł: 63 Dołączył: 27.08.2012 Ostrzeżenie: (0%) |
spróbuj jeszcze tak:
|
|
|
20.04.2020, 01:06:25
Post
#17
|
|
Grupa: Zarejestrowani Postów: 651 Pomógł: 3 Dołączył: 31.01.2011 Skąd: Warszawa Ostrzeżenie: (10%) |
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. |
|
|
20.04.2020, 06:57:56
Post
#18
|
|
Grupa: Zarejestrowani Postów: 515 Pomógł: 63 Dołączył: 27.08.2012 Ostrzeżenie: (0%) |
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/ Ten post edytował gitbejbe 20.04.2020, 07:18:08 |
|
|
20.04.2020, 08:51:41
Post
#19
|
|
Grupa: Zarejestrowani Postów: 651 Pomógł: 3 Dołączył: 31.01.2011 Skąd: Warszawa Ostrzeżenie: (10%) |
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 czyli jak tu zmienic teraz zeby w momencie wyczyszczenia inputa wszystkie ul bylo bez klasy show
albo zrobic to jak linijka 6. z toggle tylko nie wime jak analogie tu zlapac @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?
|
|
|
20.04.2020, 08:54:26
Post
#20
|
|
Grupa: Zarejestrowani Postów: 6 761 Pomógł: 1822 Dołączył: 11.03.2014 Ostrzeżenie: (0%) |
Kod if(value === ''){
tu usuń klasy } else{ tu kod z highlight } -------------------- |
|
|
Wersja Lo-Fi | Aktualny czas: 28.04.2024 - 15:12 |