Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 07.03.2017, 10:35
Pueblo88 Pueblo88 ist offline
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