El script funciona con Jquery y un pequeño Javascript que busca en el html y resalta (en amarillo) los textos que va encontrando según tu vayas ingresando las letras.
El color de fondo puede variarse de acuerdo al tema y colores de tu página web. Es además un script moderno (2012) que trabaja con todos los navegadores como el Chrome, IE9, Safari, etc.
1. En primer lugar en la sección <head> debes apuntar a un archivo jquery actualizado.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
(Lo ideal es tener el archivo grabado en tu hosting)
2. Luego puedes agregar un estilo en tu archivo de CSS o en la misma página:
<style>
.resaltar{background-color:#FF0;}
</style>
Este estilo define el fondo resaltado de tus búsquedas.
3. Seguido pegas el javascritp:
<script type='text/javascript' >
$.expr[':'].icontains = function(obj, index, meta, stack){
return (obj.textContent || obj.innerText || jQuery(obj).text() || '').toLowerCase().indexOf(meta[3].toLowerCase()) >= 0;
};
$(document).ready(function(){
$('#buscador').keyup(function(){
buscar = $(this).val();
$('#lista li').removeClass('resaltar');
if(jQuery.trim(buscar) != ''){
$("#lista li:icontains('" + buscar + "')").addClass('resaltar');
}
});
});
</script>
4. Agregas en tu lista UL el ID del JS.
<ul id:="lista">
5.- Colocas la casilla de búsqueda donde la desees y subes la página.
Buscar » <input name="buscador" id="buscador" type="text" />
DEMO: Puedes ver una página de ejemplo en:
http://www.deperu.com/nombres-peruanos/porletra-E
No hay comentarios:
Publicar un comentario en la entrada