Foros del Web - Ver Mensaje Individual

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>