buscar texto dentro html 'contains'

jhonnybmx · #1 (**permalink**) 28/08/2011, 00:00

Hola amigos quisiera que me ayudaran, he intentado hacer un buscador de texto en el html con jquery.

hasta el momento el script busca todas las palabras de concordancia. pero quiero que sea asi.

que busque palabras por palabra mediante el boton "Siguiente" que resalte 1 y no todas al tiempo.

y si se pudiece bajar el scrool y centrarse en el seleccionado.

gracias.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
 
<style>
.resaltar{background-color:#0CC;}
</style>
 
 
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
 
  <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>
 
</head>
 
<body>
 
 Buscar. <input name="buscador" id="buscador" type="text" />
 
 
      <ul  id="lista" style="position:absolute; width:200px; height:100px; left: 242px; top: 20px; overflow-y: scroll;overflow-x:hidden; background-color:#E7FDFE">
        <li>uno</li>
         <li>dos</li>
         <li>tres</li>
         <li>cuatro</li>  
         <li>cinco</li>  
         <li>seis</li>  
         <li>siente</li> 
         <li>ocho</li>   
         <li>nueve</li>
         <li>diez</li>  
  <br />
    
         <li>uno</li>
         <li>dos</li>
         <li>tres</li>
         <li>cuatro</li>
         <li>cinco</li>  
         <li>seis</li>  
         <li>siente</li> 
         <li>ocho</li>   
         <li>nueve</li>
         <li>diez</li>              
    </ul>
 
     
</body>
</html>

edwardd89 · #2 (**permalink**) 13/11/2011, 10:25

Yo lo haría sin usar el contains entonces,

Código:

buscar = $(this).val();
$('#lista li').removeClass('resaltar');
for(cont=elnumerodelultimobuscado;cont<$("#lista li").length;cont++)
if($("#lista li:eq("+cont+")").text()==buscar)
{
$("#lista li:eq("+cont+")").addClass('resaltar');
elnumerodelultimobuscado=cont;
break;
}

Vas buscando una a una y paras cuando la encuentras, la siguiente vez el contador seria el li actual y buscas la siguiente, etc
elnumerodelultimobuscado es global y empieza a 0,
espero haberme explicado!

jhonnybmx · #3 (**permalink**) 06/12/2011, 16:52

GRACIAS EDWARDD89 SIRVIO

pero yo uso

$.expr[':'].icontains = function(obj, index, meta, stack){
return (obj.textContent || obj.innerText || jQuery(obj).text() || '').toLowerCase().indexOf(meta[3].toLowerCase()) >= 0;
};

1. para que busque y resalte desde 3 caracteres y no palabra completa.
2. para que busque y encuetre oalabras mayuscula y minusculas.

¡¿Como puedo resolver eso con tu script?

GRACIAS

salu2

edwardd89 · #4 (**permalink**) 07/12/2011, 06:36

si sabes que en un li hay una parte de la plabra podrías poner un span antes de la palabra que buscas y cerrarlo cuando kieras con una clase de background por ejemplo, no se si me entiendes

jhonnybmx · #5 (**permalink**) 07/12/2011, 18:23

realmente no entiendo mucho en que podrias ayudarme eso, podrias por favor de colocarme un pequeño ejemplo.

gracias