XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)
-   -   hide- und Begrenzungsfnktion (http://xhtmlforum.de/showthread.php?t=73170)

Pueblo88 07.03.2017 10:35

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>

Vielen Dank schonmal :)

cloned 07.03.2017 10:44

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/

Pueblo88 07.03.2017 10:50

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?

Pueblo88 07.03.2017 15:48

Hat keiner eine passende Lösung für mich oder weitere Anhaltspunkte an denen ich mich orientieren könnte? Es ist wirklich dringend

cloned 07.03.2017 16:21

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";

        }
    }

Ich habe deinen Code jetzt nicht überprüft, gehe mal davon aus, dass er soweit mal funktioniert. Das hier ist die Stelle, wo du durch ALLE Elemente durchzählst, möchtest du nur 5 haben, dann könntest du diese ungefähr so erweitern. Auch hier der Hinweis, nicht getestet, etwaige Fehler können mittels Fehlerkonsole korrigiert werden.

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";
        }
    }


Pueblo88 07.03.2017 16:52

Hey :D Das funktioniert wunderbar! :lol: 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!

cloned 07.03.2017 17:31

Was soll nodisplay sein?
Ansonsten kannst du mittels CSS
Code:

li{display:none}
li-Elemente ausblenden.

Pueblo88 08.03.2017 09:25

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 :cry:

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.

cloned 08.03.2017 09:57

Code:

li[i].style.display = "block";
Wenn du es ausblendest musst du es so wieder einblenden.

Pueblo88 08.03.2017 10:05

Herzlichen Dank :D funktioniert fast alles so wie ich es möchte :D

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


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:48 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023