Hogyan lehet valós idejű keresést csinálni egy weboldalon?
Arra gondolok, hogy táblázat szerűen van mondjuk 30 objektum, amiknek szeretnék indexeket adni, és ha a keresőmezőbe beírok egy szöveget, akkor valós időben szűri a tartalmat, és csak azok maradnak megjelenítve, amiknek szerepel az indexében, vagy a nevében a keresőszó!
nyilván nem várom el hogy valaki most hirtelen leprogramozza nekem :D csak az érdekelne, hogy hogyan lehet megvalósítani? a weboldal szerkezeti felépítésére lennék kíváncsi, hogy valahogy el tudjak indulni a megvalósításban.
köszönöm előre is!










Mindenképp kliens oldalon kell intézned a dolgot, valós idejű szűrésnél szakállat növeszt a júzer, ha minden egyes begépelt betű után újratölt az oldal.
A lényeg, hogy a beviteli mező tartalmának változását vizsgálod, valahogy így:
...és a bevitt adatok alapján a változáskor lefuttatod a keresést. Aztán persze lehet trükközni, hogy ha a textboxba plusz karakter kerül, akkor csak a már megjelenített cuccok között keresel, ha egyet visszatöröl a júzer, akkor a már listázott találatok mellé dobod a frissen keresetteket, stb.
G.





Geniuseus, lehet hogy keverem a programnyelveket :D nincs nagy gyakorlatom a programozásban, de én arra gondoltam, hogyha lehetne valahogy visible tulajdonságot beállítani ezeknek az elemeknek, és ha nem felel meg a beírt keresőszónak az adott elem, akkor visible=false lesz :D vagy vmi ilyesmi. C#-ban használtunk ilyet még anno, nem tudom hogy php-be van-e ilyesmi vagy hogy miben lehetne megcsinálni.
Az Extreme Digital oldalán ami van kereső, az szerintetek miben van leprogramozva?










De minek akar bárki is ilyet programozni?
Vannak erre kész megoldások.
JQuery, Bootstrap, satöbbi.





> arra gondoltam, hogyha lehetne valahogy visible tulajdonságot beállítani ezeknek az elemeknek, és ha nem felel meg a beírt keresőszónak az adott elem, akkor visible=false lesz :D
Ez simán megoldható, nem kell hozzá semmilyen adatbázis, vagy böngészőfüggő mágia.
1. a keresőmező change vagy keyup eventjére írsz egy eseménykezelő függvényt
2. ami kiszelektálja azokat az elemeket, amikben keresni kell (mondjuk adsz a 30 div-ednek egy class-t)
3. végigmegy rajtuk egy ciklussal
4. a ciklusban először kinyeri az adott elem (megfelelő) szövegeit
5. beállítja a láthatóságot aszerint, hogy az elem szövege tartalmazza-e a keresőkifejezést
Ennyi az egész:
(Figyelj majd, ha beépíted, ne felejtsd el a jQuery-t include-olni.)
Kapcsolódó kérdések:
Minden jog fenntartva © 2025, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!