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 une pagination1

Ajouter une pagination1

Animation 3d social icones avec css3

Animation 3d social icones avec css3

Asidebar Bootstrap4 style01

Asidebar Bootstrap4 style01

Cards box with title

Cards box with title

Carousel Bootstrap3

Carousel Bootstrap3

Créer des tds dynamiquement dans une table html

Créer des tds dynamiquement dans une table html

Form Création de compte style animée

Form Création de compte style animée

Gallery images with bootstrap4 Flexbox

Gallery images with bootstrap4 Flexbox

Scroll down button 01

Scroll down button 01

Timeline style03

Timeline style03

Vidéo background en html5 style02

Vidéo background en html5 style02

toggle switch style01

toggle switch style01