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

        }
    }
}
Timeline style07

Timeline style07

Simple Table With UIKIT

Simple Table With UIKIT

Scroll to div ID

Scroll to div ID

Radio button style

Radio button style

Planète animée style01

Planète animée style01

Manual Slideshow

Manual Slideshow

Image hover 04

Image hover 04

Geocoded Locations

Geocoded Locations

Double Scrollbar with Plugin Jquery in table

Double Scrollbar with Plugin Jquery in table

Card Profile Style01

Card Profile Style01

Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire

3D Gallery with CSS3 and jQuery

3D Gallery with CSS3 and jQuery