Backspace bzw leeres Feld in Formularfeld abfangen

martin.hb · 13 Dezember 2022

Hallo! :)

ich habe folgendes Problem(chen):

In einem Suchfeld frage ich Listeneinträge ab. Ich lasse aber nur die Funde anzeigen, alle Strings, die nicht der Sucheingabe entsprechen, lasse ich ausgeblendet. Es funktioniert egtl alles wunderbar, nur wenn ich bei einem leeren Suchfeld noch mal die Backspace-taste drücke, erscheinen alle Listeneinträge. Das soll nicht sein. Ich kann die Backspace-Taste nicht generell abgreifen, da man seinen Suchstring ja auch mal korrigieren können muss. Aber wenn das Feld komplett leer ist, macht ein backspace ja keinen Sinn mehr.
Leider funktioniert es bisher nicht mit "leeres Feld anfragen". Hat jemand eine Idee zu folgendem Code?

Code:

<script>

if (document.getElementById("myInput").value == "") {
    document.getElementById('myUL').style.display = "none";
}


function myFunction() {
    var input, filter, ul, li, span, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");


    for (i = 0; i < li.length; i++) {
        span = li[i].getElementsByTagName("span")[0];
        
        txtValue = span.textContent || span.innerText;
     
       if (txtValue .toUpperCase().indexOf(filter) > -1) {
          
           document.getElementById('myUL').style.display = "block";
          
            li[i].style.display = "";
        }
            else
            li[i].style.display = "none";
            
        }
       
    }
 
}


</script>

Danke Leuts, viele Grüße!
Martin

basti1012 · 13 Dezember 2022

Ohne testbarem Code ist das meistens doof nachzuvollziehen.
Aber hier ging es.
Du fragst doch am Anfang das Input Feld ab , ob es Leer ist.
Pack das in einer Funktion und frage es bei jeden Tastendruck ab.

Ich musste dein Code etwas anpassen, weil ich nicht weiß was für ein Event du nutzt und so weiter.

Der Code soll dir ja auch nur zeigen wie ich das meine

Link zur Lösung

PS:
In deinem Code fehlt eine Klammer bei else , und du solltest dir mal querySelectorAll anschauen , das ist einfacher als deine Variante

zorro · 14 Dezember 2022

basti1012 schrieb:
https://codepen.io/basti1012/pen/zYaVNoG?editors=1000

Dein Ding hat folgende Macken:

gebe ich x ein, zeigt er richtigerweise 2 Treffer gefunden und diese in der Liste an
gebe ich dann y ein, bleibt das leere ul stehen...

Füge ich etwas per c&p ein funktioniert es nicht...

Ein Div ist innerhalb eines Labels nicht erlaubt.

Event Listener input ist der passende:

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
     <style>
       html{
         font-family:system-ui;
       }
       ul{background:yellow;}
    </style>
</head>
<body>
  <div id="info"></div>
  <label>Ihre Eingabe
    <input type="text" value="" id="myInput">
  </label>
  <ul id="myUL">
    <li><span>Algeria</span></li>
    <li><span>Marocco</span></li>
    <li><span>Libya</span></li>
    <li><span>Somalia</span></li>
    <li><span>Kenya</span></li>
    <li><span>Mauritania</span></li>
    <li><span>South Africa</span></li>
    <li><span>Canada</span></li>
    <li><span>New York</span></li>
    <li><span>Los Angeles</span></li>
    <li><span>San Diego</span></li>
    <li><span>Sacramento</span></li>
    <li><span>San Francisco</span></li>
    <li><span>Bakersville</span></li>
    <li><span>Lousiana</span></li>
    <li><span>Texas</span></li>
    <li><span>Nevada</span></li>
    <li><span>Montana</span></li>
    <li><span>Virginia</span></li>
    <li><span>Mexico</span></li>
    <li><span>Honduras</span></li>
    <li><span>Guatemala</span></li>
    <li><span>Brazil</span></li>
    <li><span>Argentina</span></li>
    <li><span>Uruguay</span></li>
    <li><span>Chile</span></li>
    <li><span>China</span></li>
    <li><span>India</span></li>
    <li><span>Malaysia</span></li>
    <li><span>Thailand</span></li>
    <li><span>Vietnam</span></li>
    <li><span>Singapore</span></li>
    <li><span>Indonesia</span></li>
    <li><span>Mongolia</span></li>
    <li><span>Norway</span></li>
    <li><span>Sweden</span></li>
    <li><span>Finland</span></li>
    <li><span>Romania</span></li>
    <li><span>Bulgaria</span></li>
  </ul>
  <script>
    "use strict";
    function filter(){
      let found = 0;
      myUL.querySelectorAll('span').forEach(
        el => {
          let isFound = el.textContent.toUpperCase()
              .indexOf(myInput.value.toUpperCase())
          el.parentElement.style.display =
              isFound==-1 ? 'none' :''
          found += (isFound !== -1)
        })
        myUL.style.display=myInput.value!=='' ? '':'none';
        found = myInput.value!=='' ? found : 0
        info.innerText = (`${found} Treffer`)
    }
    filter()
    myInput.addEventListener('input', ()=> filter() )
  </script>
</body>
</html>

martin.hb · 14 Dezember 2022

Hallo Basti und Zorro!
Danke für eure Hilfe und den Code/die Lösung! :)

Sry dass ich nicht den ganzen Code einstellte, ich wollte es vereinfachen/übersichtlicher machen, aber ich verstehe, dass das zum testen unpraktikabel ist.

Im Zuge der Vereinfachung habe ich auch einen Teil rausgelassen, weil ich mir angemutet hatte es nach Tipps dann richtig umzusetzen. Aber das schlägt fehl ^^.

Es gibt nämlich egtl. zwei Felder die betrachtet werden. Da euer Code meinem nun ziemlch anders ist und ihr es mit querySelectorAll gelöst habt, möchte ich euch noch mal folgendes fragen:

Die Listenstruktur sieht so aus im Prinzip (unten noch mal mein kompletter Code):

Code:

 <li><span>Algeria</span>text<div>123456</div></li>
    <li><span>Marocco</span>text<div>123888</div></li>
    <li><span>Libya</span>text<div>787878</div></li>
    <li><span>Somalia</span>text<div>Test</div></li>
    <li><span>Kenya</span>text<div>Hallo</div></li>
    <li><span>Mauritania</span>text<div>Loremipsum</div></li>

Es gibt also inenrhalb des li noch ein div, und wenn manim Suchfeld nun 123 eingibt, müssten auch die ersten beiden ausgegeben werden. Paralell zu der Möglichkeit die Länder zu suchen. man sucht quasi nach zwei Kriterien... Es ist eine Buchliste, in der man nach titel oder ISIN suchen können soll, wisst ihr?

Ich habe querySelectorAll entsprechend Semantik erweitert mit der CSS-Klasse div:

Code:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
     <style>
      * {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/searchicon.png');
  background-color:#fff;
  background-position: 10px 15px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li  {
  border: 1px solid #ddd;
  margin-top: -1px;
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}
#myUL div {color:grey;font-size:12px;float: right;}

#myUL li a {color:white;}

#myUL button {text-align:center; width: 100%;background-color:#5173a2;padding: 10px; border-radius: 4px}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}
    </style>
</head>
<body>
    <h2>Geben Sie hier den Titel Ihres Buches ein:</h2>
    <!--<div id="info"></div>-->

    <input type="text" id="myInput" value=""  placeholder="Titel oder ISIN eingeben">

  <ul id="myUL">
      <li><span>Wenn der Schnee fällt</span><div>ISIN: 123456</div>  <a href="#" target="_blank"> <button>PDF herunterladen</button></a>
       </li>
      
        <li><span>Das Haus im Walde</span><div>ISIN: 123492</div>  <a href="#" target="_blank"> <button>PDF herunterladen</button></a>
       </li>
      
        <li><span>Das Sommerhaus am See</span><div>ISIN: 232323</div>  <a href="#" target="_blank"> <button>PDF herunterladen</button></a>
       </li>
  </ul>

  <script>
    "use strict";
    function filter(){
      let found = 0;
      myUL.querySelectorAll('span, div').forEach(
        el => {
          let isFound = el.textContent.toUpperCase()
              .indexOf(myInput.value.toUpperCase())
          el.parentElement.style.display =
              isFound==-1 ? 'none' :''
          found += (isFound !== -1)
        })
        myUL.style.display=myInput.value!=='' ? '':'none';
        found = myInput.value!=='' ? found : 0
        //info.innerText = (`${found} Treffer`)
    }
    filter()
    myInput.addEventListener('input', ()=> filter() )
  </script>
</body>
</html>

Aber es funktioniert nicht ;( Nun funktioniert nur die Sache im DIV, er beachtet nicht das Komma und scheint den ersten Wert span zu überschreiben... Muss es ein zweiten Value oder ein Value als Array dafür geben?

Danke noch mal für Support, falls erkommt!

Grüße

zorro · 14 Dezember 2022

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
     <style>
       html{
         font-family:system-ui;
       }
       ul{background:yellow;}
    </style>
</head>
<body>
  <div id="info"></div>
  <label>Ihre Eingabe
    <input type="text" value="" id="myInput">
  </label>
  <ul id="myUL">
     <li><span>Algeria</span>text<div>123456</div></li>
    <li><span>Marocco</span>text<div>123888</div></li>
    <li><span>Libya</span>text<div>787878</div></li>
    <li><span>Somalia</span>text<div>Test</div></li>
    <li><span>Kenya</span>text<div>Hallo</div></li>
    <li><span>Mauritania</span>text<div>Loremipsum</div></li>
  </ul>
  <script>
    "use strict";
    function filter(){
      let found = 0;
      myUL.querySelectorAll('li').forEach(
        el => {
          let isFound = el.textContent.toUpperCase()
              .indexOf(myInput.value.toUpperCase())
          el.style.display =
              isFound==-1 ? 'none' :''
          found += (isFound !== -1)
        })
        myUL.style.display=myInput.value!=='' ? '':'none';
        found = myInput.value!=='' ? found : 0
        info.innerText = (`${found} Treffer`)
    }
    filter()
    myInput.addEventListener('input', ()=> filter() )
  </script>
</body>
</html>

Damit wird natürlich auch innerhalb "text" gesucht - wenn Du das nicht willst musst Du das ändern.

bspw.

HTML:

 function filter(){
      let found = 0;
      myUL.querySelectorAll('li').forEach(
        el => {
          let myText = el.querySelector('span').textContent+
              el.querySelector('div').textContent
          let isFound = myText.toUpperCase()
              .indexOf(myInput.value.toUpperCase())
          el.style.display =
              isFound==-1 ? 'none' :''
          found += (isFound !== -1)
        })
        myUL.style.display=myInput.value!=='' ? '':'none';
        found = myInput.value!=='' ? found : 0
        info.innerText = (`${found} Treffer`)
    }

martin.hb · 14 Dezember 2022

Hi Zorro,

danke, im "li" suchen ist eine coole Idee! Da er dann aber auch im Text und Button-Text suchte, habe ich nun wieder deine/eure vorherige Variante genommen und ISIN sowie Titel zusammen in das SPAN gepackt. Dafür musste ich dann das Layout ändern und sieht nicht mehr so schön aus, aber das passt schon.

Bisschen schade ist nun aber nur noch, dass es Suchergebnisse gibt, wenn man ein Zeichen einträgt.. so kommen z.B. sehr viele Titel, wenn ich einfach nur ein "e" eintrage.

Gibt es die Möglichkeit nur Ergebnisse anzuzeigen, wenn man sagen wir 3 Buchstaben eingetragen hat? Das würde die Liste erheblich verkürzen und die Suche somit eingrenzen.

Und das "ISIN" als Suchstring, ist das ausschließbar?

Danke für Tipps

Code:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
     <style>
      * {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/searchicon.png');
  background-color:#fff;
  background-position: 10px 15px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li  {
  border: 1px solid #ddd;
  margin-top: -1px;
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}
#myUL span {color:grey;font-size:12px;}

#myUL li a {color:white;}

#myUL button {text-align:center; width: auto;background-color:#5173a2;padding: 10px; border-radius: 4px}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}
    </style>
</head>
<body>
    <h2>Geben Sie hier den Titel oder ISIN ein:</h2>
    <!--<div id="info"></div>-->

    <input type="text" id="myInput" value=""  placeholder="Titel oder ISIN eingeben">

  <ul id="myUL">
   
    <li><span>ISIN: 123456<br><h2>Wenn der Schnee fällt</h2></span><div>Beschreibung</div>
      <a href="#"> <button>Herunterladen</button></a>
     </li>

  </ul>

  <script>
    "use strict";
    function filter(){
      let found = 0;
      myUL.querySelectorAll('span').forEach(
        el => {
          let isFound = el.textContent.toUpperCase()
              .indexOf(myInput.value.toUpperCase())
          el.parentElement.style.display =
              isFound==-1 ? 'none' :''
          found += (isFound !== -1)
        })
        myUL.style.display=myInput.value!=='' ? '':'none';
        found = myInput.value!=='' ? found : 0
        //info.innerText = (`${found} Treffer`)
    }
    filter()
    myInput.addEventListener('input', ()=> filter() )
  </script>
</body>
</html>

:)

zorro · 14 Dezember 2022

Frage 1 ISIN:

HTML:

let isFound = el.textContent.replace('ISIN:','').toUpperCase()

Frage 2
Du kannst die Länge mit:

HTML:

myInput.value.length

abfragen und entsprechend reagieren...

basti1012 · 14 Dezember 2022

zorro schrieb:
Dein Ding hat folgende Macken:
gebe ich x ein, zeigt er richtigerweise 2 Treffer gefunden und diese in der Liste an
gebe ich dann y ein, bleibt das leere ul stehen...
Das liegt an mein Padding von 20px.

Gebe ich dein ul 20 px Padding , wie bei meinen Beispiel, dann macht er das Gleiche.

Bei den Rest gebe ich dir soweit recht

martin.hb · 14 Dezember 2022

Danke! Ihr seid super. nicht selbstverständlich, dass man so tollen und dazu kostenlosen Support bekommt.

martin.hb · 16 Dezember 2022

Zum Haareraufen.. ;( vieles versucht, verstehe aber nicht, wo der Fehler liegt. Die Eingabelänge im Textfeld zählt er jedenfalls richtig mit. Letzter Stand:

Code:

 <script>
    "use strict";
    function filter(){
      let found = 0;
      myUL.querySelectorAll('span').forEach(
        el => {
          let isFound = el.textContent.replace('WKN:','').toUpperCase()
              .indexOf(myInput.value.toUpperCase())
          el.parentElement.style.display =
              isFound==-1 ? 'none' :''
          found += (isFound !== -1)
        })
        myUL.style.display=myInput.value!=='' ? '':'none';
        found = myInput.value!=='' ? found : 0 
        info.innerText = (`${found} Treffer`) 
        var laenge = myInput.value.length;
    }
    filter();
    
    if ($laenge > 2) {
        myInput.addEventListener('input', ()=> filter() );
    }
    else {return false;}
    
  </script>

martin.hb · 20 Dezember 2022

Hallo Sempervivum,

für mich schon ^^ Aber ich glaube es möchte niemand mehr , möchtest du den Beitrag schließen? dann ist es wohl ok.

LG

martin.hb · 20 Dezember 2022

Danke für deine Idee! Leider klappt es noch nicht. Mit dem neuen Code werden alle Listeneinträge von vorn herein angezeigt, ohne dass man etwas im Suchfeld angibt. Eine Eingabe im Suchfeld führt zudem auch nicht mehr zu einer Eingrenzung der Suchergebnisse. Hmm.

martin.hb · 20 Dezember 2022

Code:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
     <style>
      * {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/searchicon.png');
  background-color:#fff;
  background-position: 10px 15px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li  {
  border: 1px solid #ddd;
  margin-top: -1px;
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}
#myUL span {color:grey;font-size:12px;}

#myUL li a {color:white;}

#myUL button {text-align:center; width: auto;background-color:#5173a2;padding: 10px; border-radius: 4px}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}

#myUL li.hidden {
        display: none:
    }
    </style>
</head>
<body>
    <h2>Geben Sie hier den Name ein:</h2>
    <!--<div id="info"></div>-->

    <input type="text" id="myInput" value=""  placeholder="Name eingeben">

  <ul id="myUL">
     
    <li><span>ISIN: 123456<br><h2>Haus im Walde</h2></span>
      <a href="#" target="_blank"> <button>Öffnen</button></a>
     
    </li>
    
    <li><span>ISIN: 123777<br><h2>Schnee im Felde</h2></span>
      <a href="#" target="_blank"> <button>Öffnen</button></a>
     
    </li>
    
    <li><span>ISIN: ABC456<br><h2>Das Haus der Stille</h2></span>
      <a href="#" target="_blank"> <button>Öffnen</button></a>
     
    </li>
   
  </ul>

  <script>

    "use strict";
    function filter(){
      const laenge = myInput.value.length;
      let nrFound = 0;
      myUL.querySelectorAll('span').forEach(
        el => {
            el.classList.add('hidden');
            if (laenge > 2) {
                let isFound = el.textContent.replace('ISIN:','').toUpperCase()
                    .indexOf(myInput.value.toUpperCase();
                if (isFound) {
                   el.classList.remove('hidden');
                   nrFound++;
                }
            }
        });
        info.innerText = `${nrFound} Treffer`;
    }
    filter();
    
    myInput.addEventListener('input', filter);
</script>
    

</body>
</html>

martin.hb · 20 Dezember 2022

Funkioniert ! ;) Klasse, vielen Dank! Auch für die valide-Tipps.

Backspace bzw leeres Feld in Formularfeld abfangen

martin.hb

Neues Mitglied

basti1012

Senior HTML'ler

zorro

Mitglied

martin.hb

Neues Mitglied

zorro

Mitglied

martin.hb

Neues Mitglied

zorro

Mitglied

basti1012

Senior HTML'ler

martin.hb

Neues Mitglied

martin.hb

Neues Mitglied

martin.hb

Neues Mitglied

martin.hb

Neues Mitglied

martin.hb

Neues Mitglied

martin.hb

Neues Mitglied

Neueste Beiträge