Backspace bzw leeres Feld in Formularfeld abfangen
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
Der hier verwendete Code
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
height: 100vh;
}
ul {
width: 90%;
margin-top: 10px;
display: flex;
background: #fff1c1;
padding: 20px;
overflow: auto;
}
li {
list-style-type: decimal;
font-size: 18px;
margin-left: 10px;
}
</style>
</head>
<body>
<label>
<div id="info"></div>
<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>
var inp_ele = document.getElementById("myInput");
var ul_ele = document.getElementById('myUL');
var info_ele = document.getElementById('info');
var menge;
function start() {
if (inp_ele.value == "") {
ul_ele.style.display = "none";
menge = 0;
}
info_ele.innerHTML = menge + ' Treffer gefunden';
}
inp_ele.addEventListener('keyup', function() {
filter = inp_ele.value.toUpperCase();
li = ul_ele.getElementsByTagName("li");
menge = 0;
for (i = 0; i < li.length; i++) {
span = li[i].getElementsByTagName("span")[0];
if (span.innerHTML.toUpperCase().indexOf(filter) > -1) {
ul_ele.style.display = "block";
menge++;
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
start();
})
start();
</script>
</body>
</html>