zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden hide- und Begrenzungsfnktion

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.03.2017, 10:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.03.2017
Beiträge: 10
Pueblo88 befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.03.2017, 10:44
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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/
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.03.2017, 10:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.03.2017
Beiträge: 10
Pueblo88 befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #4 (permalink)  
Alt 07.03.2017, 15:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.03.2017
Beiträge: 10
Pueblo88 befindet sich auf einem aufstrebenden Ast
Standard

Hat keiner eine passende Lösung für mich oder weitere Anhaltspunkte an denen ich mich orientieren könnte? Es ist wirklich dringend
Mit Zitat antworten
  #5 (permalink)  
Alt 07.03.2017, 16:21
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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";
        }
    }
Mit Zitat antworten
  #6 (permalink)  
Alt 07.03.2017, 16:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.03.2017
Beiträge: 10
Pueblo88 befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
  #7 (permalink)  
Alt 07.03.2017, 17:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Was soll nodisplay sein?
Ansonsten kannst du mittels CSS
Code:
li{display:none}
li-Elemente ausblenden.
Mit Zitat antworten
  #8 (permalink)  
Alt 08.03.2017, 09:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.03.2017
Beiträge: 10
Pueblo88 befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #9 (permalink)  
Alt 08.03.2017, 09:57
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Code:
li[i].style.display = "block";
Wenn du es ausblendest musst du es so wieder einblenden.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 08.03.2017, 10:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.03.2017
Beiträge: 10
Pueblo88 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


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