Chercher un mot sur la liste

<!DOCTYPE html>
<html>
<head>
	<title>Chercher un mot sur la liste | par NGLESSON</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="Chercher un mot sur la liste">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" type="text/css">    	
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body class="container">
	<div class="row">
	    <div class="col-lg-6">
			<h2 class="text-left text-info">Mes contacts</h2>
			<div class="form-group input-group">
				<span class="input-group-addon"><i class="fa fa-search"></i></span>
				<input type="text" id="InputSearch" onkeyup="myFunction()" placeholder="Chercher un nom" class="form-control">
			</div>
			<br>
			<ul id="Lists">
			  <li><a href="#">Ahmed</a></li>
			  <li><a href="#">Mohammed</a></li>
			  <li><a href="#">Saadia</a></li>
			  <li><a href="#">Youssef</a></li>
			  <li><a href="#">Ali</a></li>
			  <li><a href="#">Amine</a></li>
			  <li><a href="#">Houda</a></li>
			  <li><a href="#">Said</a></li> 
			  <li><a href="#">Rachida</a></li>
			  <li><a href="#">Oumaima</a></li>
			  <li><a href="#">Youness</a></li>
			  <li><a href="#">Ibrahim</a></li>
			</ul>
			<br>
		</div>
	</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
* {
    box-sizing: border-box;
  }
  
  #InputSearch {
    background-position: 10px 12px;
    background-repeat: no-repeat;
    width: 100%;
    font-size: 16px;
    padding: 12px 20px 12px 40px;
    border: 1px solid #ddd;
  }
  
  #Lists {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  
  #Lists 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
  }
  
  #Lists li a:hover:not(.header) {
    background-color: #eee;
  }
function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("InputSearch");
    filter = input.value.toUpperCase();
    ul = document.getElementById("Lists");
    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";

        }
    }
}
Ajouter multiple input dynamique

Ajouter multiple input dynamique

Card Bootstrap4 02

Card Bootstrap4 02

Card Panel Bootstrap4 with header and footer

Card Panel Bootstrap4 with header and footer

Carousel Bootstrap3

Carousel Bootstrap3

ChartJS style01

ChartJS style01

Input file style01

Input file style01

Nav Menu style01

Nav Menu style01

Pagination with Jquery

Pagination with Jquery

Transitions Animations SVG Style01

Transitions Animations SVG Style01

Vidéo background en html5 style01

Vidéo background en html5 style01

input radio checkbox b4 style

input radio checkbox b4 style

toggle switch style03

toggle switch style03