albertochiwas/search_box.html

## search_box.html
<!doctype html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <title>Buscador</title>

</head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>

    var acentos = "áéíóúÁÉÍÓÚüÜ";
    var noac    = "aeiouaeiouuunn";

    function sinAcentos(str) {
      var s = str;
       for (var i=0; i<noac.length; i++) {
          s = s.replace(acentos[i]), noac[i]);
       }
       return s;
    }

    jQuery(document).ready(function($) {

        $('.live-search-list li').each(function() {
            $(this).attr('data-search-term', $(this).text().toLowerCase());
        });

        $('.live-search-box').on('keyup', function() {

            var searchTerm = $(this).val().toLowerCase();
            alert(sinAcentos(searchTerm));

            $('.live-search-list li').each(function() {

                if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) {
                    $(this).show();
                } else {
                    $(this).hide();
                }

            });

        });

    });

</script>

<style>
    .live-search-list {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 1em;
        background-color: #2c3e50;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        font-family: 'Lato', sans-serif;
        color: #fff;
    }

    .live-search-box {
        width: 100%;
        display: block;
        padding: 1em;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px solid #3498db;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    .live-search-list li {
        color: fff;
        list-style: none;
        padding: 0;
        margin: 5px 0;
    }

</style>

<body>
    <input type="text" class="live-search-box" placeholder="search here" />

    <ul class="live-search-list">
        <div>
            <li>Curso 1
                <br>Curso de informatica
                <br>Auditorio uach
                <br>Profesor pepe
            </li>
        </div>
        <div>
            <li>Curso 2
                <br>Platica informativa
                <br>Museo semilla
                <br>Profesor juan
            </li>
        </div>
        <div>
            <li>Curso 3
                <br>Practicas
                <br>salon 53
                <br>Profesor juan
            </li>
        </div>
        <div>
            <li>Curso 4
                <br>Cursos programacion
                <br>laboratorios
                <br>Profesor alan
            </li>
        </div>
        <div>
            <li>Curso 5
                <br>hackaton
                <br>Biblioteca
                <br>Profesor sergio
            </li>
        </div>
    </ul>


</body>

</html>
	<!doctype html>
	<html lang="es">

	<head>
	<meta charset="UTF-8">
	<title>Buscador</title>

	</head>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script>

	var acentos = "áéíóúÁÉÍÓÚüÜ";
	var noac = "aeiouaeiouuunn";

	function sinAcentos(str) {
	var s = str;
	for (var i=0; i<noac.length; i++) {
	s = s.replace(acentos[i]), noac[i]);
	}
	return s;
	}

	jQuery(document).ready(function($) {

	$('.live-search-list li').each(function() {
	$(this).attr('data-search-term', $(this).text().toLowerCase());
	});

	$('.live-search-box').on('keyup', function() {

	var searchTerm = $(this).val().toLowerCase();
	alert(sinAcentos(searchTerm));

	$('.live-search-list li').each(function() {

	if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 \|\| searchTerm.length < 1) {
	$(this).show();
	} else {
	$(this).hide();
	}

	});

	});

	});

	</script>

	<style>
	.live-search-list {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 1em;
	background-color: #2c3e50;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-family: 'Lato', sans-serif;
	color: #fff;
	}

	.live-search-box {
	width: 100%;
	display: block;
	padding: 1em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #3498db;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	}

	.live-search-list li {
	color: fff;
	list-style: none;
	padding: 0;
	margin: 5px 0;
	}

	</style>

	<body>
	<input type="text" class="live-search-box" placeholder="search here" />

	<ul class="live-search-list">
	<div>
	<li>Curso 1
	<br>Curso de informatica
	<br>Auditorio uach
	<br>Profesor pepe
	</li>
	</div>
	<div>
	<li>Curso 2
	<br>Platica informativa
	<br>Museo semilla
	<br>Profesor juan
	</li>
	</div>
	<div>
	<li>Curso 3
	<br>Practicas
	<br>salon 53
	<br>Profesor juan
	</li>
	</div>
	<div>
	<li>Curso 4
	<br>Cursos programacion
	<br>laboratorios
	<br>Profesor alan
	</li>
	</div>
	<div>
	<li>Curso 5
	<br>hackaton
	<br>Biblioteca
	<br>Profesor sergio
	</li>
	</div>
	</ul>


	</body>

	</html>