Ver Mensaje Individual
  #1 (permalink)  
Antiguo 22/08/2011, 17:59
Avatar de jhonnybmx
jhonnybmx
 
Fecha de Ingreso: abril-2007
Ubicación: Bogotá, colombia
Mensajes: 22
Antigüedad: 17 años
Puntos: 0
Buscar y resaltar texto dentro de un div con jquery

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>