Script para buscar palabras o textos en una página (html) con Jquery
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
Si deseas la misma función en una tabla, visita
http://webmasters.guiaplaza.com/2014/01/script-para-buscar-palabras-en-una.html
Gracias por tu aporte, pero no me funcionó.
ResponderEliminarLuís hubo un error, después de id no correspondía dos puntos (:) ya fue corregido el error y funciona perfectamente.
Eliminarhermano no me funciona que sera? lo edite en kompozer
Eliminarsi funciona discula estaba escribiendo yo mal las cosas una pregunta como seria en texto que tengo encima de una imagen
EliminarSi necesito que ven vez de lista sea buscar una palabra que se encuentre dentro de una tabla como seria? ya pobre cambiando el atributo li pero no me funciona
ResponderEliminarel ejemplo en una tabla ya está listo en
Eliminarhttp://webmasters.guiaplaza.com/2014/01/script-para-buscar-palabras-en-una.html
Gracias y muy buena aportación, por fin he dejado mi sitio como quería con una página de ayuda por todo lo alto.
ResponderEliminarSaludos y sigue así :)
Hola. Gracias, estaba buscando algo asi. Queria saber como puedo hacer para que acepte las palabras con y sin acento, por ejemplo: Constitucion - Constitución
ResponderEliminarGracias por compartir.
con una regla: [a,áA,Áe,éÉ,Éi,íI,Í]...etc....
EliminarQue tal amigo.. Sabras como hacer una lista desplegable, donde al seleccionarla te muestra 100 datos (por ejemplo) y si tu quieres ver el 100, pero no quieres ir hasta abajo, la primera opcion de la lista sea una busqueda interna? Osea, al desplegar los datos que el primer option de esta lista sea para buscar entre los datos que contenga esa lista! Espero tu ayuda amigo! Gracias y disculpa el atrevimiento
ResponderEliminarLo que buscas es otro script con Jquery, funciona casi parecido, solo que muestra el resultado arriba.
EliminarBuenas Tardes..!!! necesito un ejemplo de un código HTML para hacer búsquedas locales dentro de mi pagina web.
ResponderEliminarGracias.
Si tu página es de texto y está ordenado por párrafos, puedes usar < p > en lugar de < ul >.
Eliminarsi tengo dos listados de ul, como lo puedo hacer para que me funcione en los dos?
ResponderEliminarEl ID de la lista los diferencia, ponle un ID diferente
EliminarExcelentes tips para realizar búsquedas en google.
ResponderEliminar