<!DOCTYPE html>
<html>
<head>
<style>
* { box-sizing: border-box;
font-family: Helvetica;
transition: all .4s;
outline: none 0px;
}
#input {
width: 100%;
padding: 12px;
margin-bottom: 12px;
font-size: 16px;
border: 1px solid #DDDDDD;
}
#input:focus {
border: 1px solid #000000;
}
#ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#ul li a {
padding: 12px;
display: block;
margin-top: -1px;
border: 1px solid #DDDDDD;
background-color: #F4F4F4;
text-decoration: none;
font-size: 16px;
color: #000000;
}
#ul li a.header {
background-color: #E4E4E4;
cursor: default;
}
#ul li a:hover {
background-color: #EEEEEE;
}
</style>
<script>
function search() { var input, filter, ul, li, a, i;
input = document.getElementById("input"); filter = input.value.toUpperCase();
ul = document.getElementById("ul"); 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 = "block";
} else { li[i].style.display = "none";
}
}
}
</script>
</head>
<body>
<h4>Agenda de Contactos</h4>
<input type="text" id="input" onkeyup="search()" placeholder="Busca un nombre ..." title="Escribe un nombre">
<ul id="ul">
<li><a href="#" class="header">A</a></li>
<li><a href="#">Adela</a></li>
<li><a href="#">Antonio</a></li>
<li><a href="#" class="header">B</a></li>
<li><a href="#">Begoña</a></li>
<li><a href="#">Basilio</a></li>
<li><a href="#" class="header">C</a></li>
<li><a href="#">Cristina</a></li>
<li><a href="#">Carlos</a></li>
<li><a href="#">Carmen</a></li>
</ul>
</body>
</html>
