Buscar y resaltar texto dentro de un div con jquery

jhonnybmx · #1 (**permalink**) 22/08/2011, 17:59

cador de texto dentro de un div con jquery. aca les dejo el codigo como va.
http://www.forosdelweb.com/f127/
lo que necesito y no me he podido hacer es lo siguiente.
1. que solo busque y resalte en un div especifico. osea el de arriba.
2. que cuando escriba en la caja texto resalte el primero resultado y si presiono el boton ">>" pasa a resatar el segundo resultado y asi continuamente.
3. el div de arriba tiene tamaño exacto asi que se usara scrool, al buscar un palabra el scrool deberia centrarse en la busqueda algo asi como el buscador del navegador (ctrl+f)
4.si escribo en la caja de texto y borro lo escrito y escribo otra busqueda deberia borrarse lo anteriomente resaltado.
5. EL MAS COMPLICADO "CREO

" al resartar una palabra si en caso que fuera etiqueta <a><a/> podria presionar ENTER y hacer algun accion como un msj con javascript

GRACIAS.

Código HTML:

<html>

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
</head>
 <br><br><br>
buscar en este div
<div  style="overflow-y: scroll; overflow-x:hidden;   width: 198px; height: 100px; background-color:#09F">
      <ul> 
           <li> uno    </li>
           <li> dos    </li>
           <li> tres   </li>
           <li> cuatro </li>
           <li> cinco  </li>
           <li> seis   </li>
           <li> siete  </li>
           <li> ocho   </li>
           <li> nueve  </li>
           <li> diez   </li>                 
      </ul>
</div>

<br> <br> <br> <br> 
Nunca buscar en este div
<div style="background-color:#F60; width: 198px;">
<ul> 
           <li> uno    </li>
           <li> dos    </li>
           <li> tres   </li>
           <li> cuatro </li>
           <li> cinco  </li>
           <li> seis   </li>
           <li> siete  </li>
           <li> ocho   </li>
           <li> nueve  </li>
           <li> diez   </li>                 
      </ul>
</div>
<script type="text/javascript">
	     function buscar(){
			  var txt = $("#buscar").attr("value");
			  if(txt!=""){
        	   	 $("li:contains('"+txt+"')").css({backgroundColor: '#ffe', borderLeft: '5px solid #3366FF'});
			  }
		 }
    </script>
    
    <br><br> <br><br> 
    
<input name="buscar" id="buscar" type="text" onKeyPress="buscar();">
<input type="submit"   name="button" id="button" value=">>">
<br>
<br>
 

</body>
</html>