Script para buscar palabras o textos en una página (html) con Jquery

Aquí les muestro la solución que recientemente encontré para colocar un buscador dentro de una página web para que encuentre textos o palabras.

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




15 comentarios:

  1. Gracias por tu aporte, pero no me funcionó.

    ResponderEliminar
    Respuestas
    1. Luís hubo un error, después de id no correspondía dos puntos (:) ya fue corregido el error y funciona perfectamente.

      Eliminar
    2. hermano no me funciona que sera? lo edite en kompozer

      Eliminar
    3. si funciona discula estaba escribiendo yo mal las cosas una pregunta como seria en texto que tengo encima de una imagen

      Eliminar
  2. Si 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

    ResponderEliminar
    Respuestas
    1. el ejemplo en una tabla ya está listo en
      http://webmasters.guiaplaza.com/2014/01/script-para-buscar-palabras-en-una.html

      Eliminar
  3. 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.
    Saludos y sigue así :)

    ResponderEliminar
  4. 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

    Gracias por compartir.

    ResponderEliminar
    Respuestas
    1. con una regla: [a,áA,Áe,éÉ,Éi,íI,Í]...etc....

      Eliminar
  5. Que 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

    ResponderEliminar
    Respuestas
    1. Lo que buscas es otro script con Jquery, funciona casi parecido, solo que muestra el resultado arriba.

      Eliminar
  6. Buenas Tardes..!!! necesito un ejemplo de un código HTML para hacer búsquedas locales dentro de mi pagina web.
    Gracias.

    ResponderEliminar
    Respuestas
    1. Si tu página es de texto y está ordenado por párrafos, puedes usar < p > en lugar de < ul >.

      Eliminar
  7. si tengo dos listados de ul, como lo puedo hacer para que me funcione en los dos?

    ResponderEliminar
    Respuestas
    1. El ID de la lista los diferencia, ponle un ID diferente

      Eliminar

Ultimos temas en Soluciones para Webmasters: