Busqueda automática

by Alejandro Hernández

HTML

<ul>
    <li><a href="#">esta es una opcion</a></li>
    <li>esta es otra</li>
    <li><a href="#">más opciones</a></li>
    <li><a href="#">mas cosas</a></li>
    <li>a ver
        <ul>
            <li><a href="#">cosas hijas 1</a></li>
            <li><a href="#">cosas hijas 2</a></li>
        </ul>
    </li>
    <li><a href="#">a ver más</a></li>
    <li><a href="#">a ver menos</a></li>
<ul>
<input type="textbox" id="searchField"/>
<div id="resultDiv"></div>

CSS

.search-found
{
    text-decoration: underline;
    font-weight:bold;
}
div
{
    width: 160px;
}
.data-search-result
{
    border: solid 3px;
}

JavaScript

$("#searchField").on('keyup',function(){
    var buscado = $("#searchField").val();
    $('#resultDiv').empty();
    if (buscado.length > 0){
        var resultado = $("ul li a:contains('"+buscado+"')");
        resultado.each(function(){    
            $('#resultDiv').append($(this).html().replace(buscado,'<span class="search-found">' + buscado + '</span>')+'<br/>');    
        });     
    }
});