1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
|
<!DOCTYPE html>
<html>
<title>Recherche</title>
<body>
<div class="w3-container">
<h2>Filtrer une Liste</h2>
<p>Rechercher un nom dans le champ de saisie.</p>
<input type="text" placeholder="Chercher un noms..!" id="myInput" onkeyup="myFunction()">
<ul id="myUL">
<li>Adele</li>
<li>Agnes</li>
<li>Bil</li>
<li>Bob</li>
<li>Calvin</li>
<li>Christine</li>
<li>Cindy</li>
<li>Max</li>
<li>Michelle</li>
<li>Maurice</li>
<li>Pierre</li>
<li>louis</li>
</ul>
</div>
<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++) {
if (li[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
</body>
</html> |
Partager