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";

        }
    }
}
toggle switch style01

toggle switch style01

input radio checkbox b4 style

input radio checkbox b4 style

Vidéo background en html5 style02

Vidéo background en html5 style02

Timeline style08

Timeline style08

Timeline style02

Timeline style02

Responsive image grid

Responsive image grid

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Input range slider HTML style04

Input range slider HTML style04

Drag and drop or upload input file

Drag and drop or upload input file

Double Scrollbar with Plugin Jquery in table

Double Scrollbar with Plugin Jquery in table

Carousel 8 bloc with B4

Carousel 8 bloc with B4

Arrows Defense Game

Arrows Defense Game