Ver Mensaje Individual
  #1 (permalink)  
Antiguo 28/08/2011, 00:00
Avatar de jhonnybmx
jhonnybmx
 
Fecha de Ingreso: abril-2007
Ubicación: Bogotá, colombia
Mensajes: 22
Antigüedad: 15 años, 2 meses
Puntos: 0
buscar texto dentro html 'contains'

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Documento sin título</title>
  5.  
  6. .resaltar{background-color:#0CC;}
  7.  
  8.  
  9.  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
  10.  
  11.   <script type='text/javascript' >
  12.  
  13.     $.expr[':'].icontains = function(obj, index, meta, stack){
  14.     return (obj.textContent || obj.innerText || jQuery(obj).text() || '').toLowerCase().indexOf(meta[3].toLowerCase()) >= 0;
  15.     };
  16.  
  17.  
  18.     $(document).ready(function(){    
  19.    
  20.         $('#buscador').keyup(function(){
  21.    
  22.                      buscar = $(this).val();
  23.                      $('#lista li').removeClass('resaltar');
  24.          
  25.                             if(jQuery.trim(buscar) != ''){
  26.                                
  27.                                $("#lista li:icontains('" + buscar + "')").addClass('resaltar');
  28.                              
  29.                             }
  30.    
  31.    
  32.             });
  33.     });
  34.      
  35.        
  36.  </script>
  37.  
  38. </head>
  39.  
  40.  
  41.  Buscar. <input name="buscador" id="buscador" type="text" />
  42.  
  43.  
  44.       <ul  id="lista" style="position:absolute; width:200px; height:100px; left: 242px; top: 20px; overflow-y: scroll;overflow-x:hidden; background-color:#E7FDFE">
  45.         <li>uno</li>
  46.          <li>dos</li>
  47.          <li>tres</li>
  48.          <li>cuatro</li>  
  49.          <li>cinco</li>  
  50.          <li>seis</li>  
  51.          <li>siente</li>
  52.          <li>ocho</li>  
  53.          <li>nueve</li>
  54.          <li>diez</li>  
  55.   <br />
  56.    
  57.          <li>uno</li>
  58.          <li>dos</li>
  59.          <li>tres</li>
  60.          <li>cuatro</li>
  61.          <li>cinco</li>  
  62.          <li>seis</li>  
  63.          <li>siente</li>
  64.          <li>ocho</li>  
  65.          <li>nueve</li>
  66.          <li>diez</li>              
  67.     </ul>
  68.  
  69.      
  70. </body>
  71. </html>