|
|||
hide- und Begrenzungsfnktion
Hi liebe Community
Ich bräuchte mal eure Hilfe. Ich habe ein Suchfeld mit Eingabemöglichkeit und würde gerne nur das Suchfeld ohne die Liste darunter haben. Ebenso sollen maximal 5 Ergebnisse angezeigt werden. Hat jemand eine Lösung für mich? Code:
<!DOCTYPE html> <html> <head> <style> #myInput { background-image: url('https://www.domain.de/templates/emotion_tl24/frontend/_resources/images/icons/ico_searchloupe.png'); background-position: 10px 12px; background-repeat: no-repeat; width: 89.5%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 17px; margin-top: 34px; } #myUL { list-style-type: none; padding: 0; margin: 0; } #myUL li a { border: 1px solid #ddd; margin-top: -1px; /* Prevent double borders */ background-color: #f6f6f6; padding: 12px; text-decoration: none; font-size: 18px; color: black; display: block } #myUL li a.header { background-color: #e2e2e2; cursor: default; } #myUL li a:hover:not(.header) { background-color: #000000; color: white; } </style> </head> <body> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Tippen Sie hier Ihr Modell ein" title="Type in a name"> <ul id="myUL"> <li><a href="#" class="header">Brother DCP</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-105-C">Brother DCP-105 C</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-110-C">Brother DCP-110 C</a></li> <li><a href="#" class="header">Brother DCP-J</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-J-125">Brother DCP-J 125</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-J-132-W">Brother DCP-J 132 W</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-J-132-W">Brother DCP-J 132 W</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-J-140-W">Brother DCP-J 140 W</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-J-150-Series">Brother DCP-J 150 Series</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-J-150-Series">Brother DCP-J 150 Series</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-J-152-W">Brother DCP-J 152 W</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-J-152-W">Brother DCP-J 152 W</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-J-152-WR">Brother DCP-J 152 WR</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-J-152-WR">Brother DCP-J 152 WR</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-J-315-W">Brother DCP-J 315 W</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-J-515-W">Brother DCP-J 515 W</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-J-525-W">Brother DCP-J 525 W</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-J-552-DW">Brother DCP-J 552 DW</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-J-552-DW">Brother DCP-J 552 DW</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-J-562-DW">Brother DCP-J 562 DW</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-J-715-W">Brother DCP-J 715 W</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-J-725-DW">Brother DCP-J 725 DW</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-J-752-DW">Brother DCP-J 752 DW</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-J-752-DW">Brother DCP-J 752 DW</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-J-925-DW">Brother DCP-J 925 DW</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-J-4110-DW">Brother DCP-J 4110 DW</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-J-4110-W">Brother DCP-J 4110 W</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-J-4120-DW">Brother DCP-J 4120 DW</a></li> <li><a href="#" class="header">Brother DCP-L</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-L-2500-D">Brother DCP-L 2500 D</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-L-2520-DW">Brother DCP-L 2520 DW</a></li> <li><a href="https://www.domain.de/Drucker/Brother-DCP-L-2540-DN">Brother DCP-L 2540 DN</a></li> </ul> <script> function myFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); ul = document.getElementById("myUL"); li = ul.getElementsByTagName("li"); for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } } </script> </body> </html> |
Sponsored Links |
|
|||
Und woran scheitert es jetzt? Wenn du nur 5 anzeigen möchtest, dann brauchst du eine weitere Variable, die durchzählt wie viele Elemente schon angezeigt werden.
Bzw: Ist so etwas, was für dich passen könnte? https://selectize.github.io/selectize.js/ |
Sponsored Links |
|
|||
Hi cloned,
danke für deine Antwort! Ich habe sonst mit JS nix zutun und musste mir den Code mühselig raussuchen. Wo müsste ich das denn genau einfügen um die gewünschte Begrenzung zu erhalten? Geändert von Pueblo88 (07.03.2017 um 11:20 Uhr) |
|
|||
Code:
for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } Code:
var j = 0; for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; if (a.innerHTML.toUpperCase().indexOf(filter) > -1 && j != 5) { li[i].style.display = ""; j++; } else { li[i].style.display = "none"; } } |
|
|||
Hey Das funktioniert wunderbar! Herzlichen Dank!
Jetzt habe ich nur noch das Problem, dass unterhalb des Suchfeldes alle Inhalte der <li> Listen gezeigt werden. Ich habe mittels "nodisplay" zwar alle ausgeblendet bekommen, jedoch funktioniert dann die Eingabe nicht. Hättest du dafür auch noch eine Lösung? Ich bedanke mich schonmal recht herzlich bei dir! |
|
|||
Ich hatte da was im Internet gefunden und es versucht.
Habe es nun in das CSS eingefügt und er blendet sie auch aus, aber dann funktioniert die Suche nicht mehr https://www.w3schools.com/code/tryit...e=FDFGO3KXCDJI Gibt es dafür noch eine andere Lösung? Edit: Hab es auch mit visibility: hidden versucht, aber auch da funktioniert es nicht. Kann zwar Werte eintippen, aber der Reiter klappt sich nicht mehr aus. Geändert von Pueblo88 (08.03.2017 um 09:35 Uhr) |
|
|||
Herzlichen Dank funktioniert fast alles so wie ich es möchte
Wenn ich jetzt zum Beispiel dw eintippe, werden mir die 5 ergebnisse angezeigt, aber wenn ich sie wieder lösche, erscheinen unten trotzdem weiterhin 5 Ergebnisse. Gibt es noch eine Möglichkeit, dass beim leeren des Suchfelds keine Zeilen angezeigt werden? https://www.w3schools.com/code/tryit...e=FDFHSJ3VX5JP |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
hide .php extension | tupamaro | (X)HTML | 5 | 25.11.2015 21:18 |
Fenster Einblendung im Zusammenspiel mit div hide show funktioniert nur zu 50 % | alumnius | CSS | 1 | 19.06.2013 13:51 |
jquery: hide() und show() von der anderen Seite | alsodenn | Javascript & Ajax | 10 | 17.09.2009 18:12 |
Show Hide Layers Funktion gesucht. | Praktikant | Javascript & Ajax | 1 | 09.09.2008 16:52 |
Hide CSS from Safari | ulle | Ressourcen | 3 | 11.09.2005 23:07 |