
25/09/2010, 12:19
|
| | Fecha de Ingreso: julio-2010
Mensajes: 38
Antigüedad: 14 años, 7 meses Puntos: 0 | |
Respuesta: Función para buscar en web Cita:
Iniciado por Adler Hola
Este es de @panino
Código Javascript :
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=iso-8859-1" /> <title>test</title> <script> String.prototype.preg_quote=function(){ p= /([:.\+*?[^\]$(){}=!<>|:)])/g; return this.replace(p,"\\$1"); } function buscar(cadena){ resetear(); if(!cadena.length)return; var info3; cadena=cadena.preg_quote(); var patron=new RegExp(cadena+'(?!\}\})','gim'); var espacio=/^\s$/; var el=document.getElementById('tabla').getElementsByTagName('*'); for(var ii=0;ii<el.length;ii++){ if(el[ii].hasChildNodes && el[ii].nodeName.toLowerCase()!='title' && el[ii].nodeName.toLowerCase()!='script' && el[ii].nodeName.toLowerCase()!='meta' && el[ii].nodeName.toLowerCase()!='link' && el[ii].nodeName.toLowerCase()!='style'){ var tt=el[ii].childNodes; for(var jj in tt){ if(tt[jj].nodeType==3 && !espacio.test(tt[jj].nodeValue)){ patron.lastIndex = 0; if(info3=patron.exec(tt[jj].nodeValue)){ tt[jj].nodeValue=tt[jj].nodeValue.replace(patron,'{{'+tt[jj].nodeValue.substr(info3['index'],cadena.length)+'}}'); } } } } } document.getElementById('tabla').innerHTML=document.getElementById('tabla').innerHTML.split('}}').join('</span>').split('{{').join('<span style="background-color: yellow">'); } function resetear(){ document.getElementById('tabla').innerHTML=original; } window.onload=function(){ original=document.getElementById('tabla').innerHTML; } </script> </head> <body> <form id="form1" name="form1" method="post" action=""> <input name="key" type="text" id="key" onkeyup="buscar(this.value)" /> <br /> <div id="tabla"> <table width="300" border="1" cellpadding="1" > <tr> <td>Pepe</td> <td>López</td> </tr> <tr> <td>José</td> <td>San Martín </td> </tr> </table> </div> </form> </body> </html>
y este otro es mio
Código Javascript :
Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es"> <head> <meta name="http-equiv" content="Content-type: text/html; charset=UTF-8"/> <script type="text/javascript"> var cadena = ''; var largo_cadena = 0; window.onload = function() {cadena = document.getElementById('texto').innerHTML; largo_cadena = cadena.length;}; function Resaltar(cadABuskar) { var caracteresInput = cadABuskar.length; if (caracteresInput == 2) { document.getElementById('texto').innerHTML = cadena; document.getElementById('terminos').style.border = ''; } else if (caracteresInput >= 3) { var rgEx = new RegExp(cadABuskar, 'g\i'); if (rgEx.test(cadena.substr(0,parseInt(largo_cadena)))) { var marca = cadena.substr(0,parseInt(largo_cadena)).replace(rgEx, function(coincidencia){return '<span style=\"background-color:#9ACD32;color:#FFF;\">' + coincidencia + '</span>';}); document.getElementById('texto').innerHTML = marca; document.getElementById('terminos').style.border = 'solid #9ACD32 1px'; } else { document.getElementById('texto').innerHTML = cadena; document.getElementById('terminos').style.border = 'solid #FF0000 1px'; } } } </script> </head> <body> <form method="post" action="" name="" autocomplete="off"> Buscar Terminos: <input type="text" value="" id="terminos" onkeyup="Resaltar(this.value);" /> </form> <div id="texto"> <table width="300" border="1" cellpadding="1" > <tr> <td>Pepe</td> <td>López</td> </tr> <tr> <td>José</td> <td>San Martín </td> </tr> </table> </div> </body> </html>
Suerte En la <table> que pusiste yo cambié los contenidos y puse 2 radiobuttons: ¿Como puedo hacer para que dentro de las opciones de busqueda aparezca una busqueda distinta en función de la opcion que se elija de cualquiera de los 2 fadiobuttons ? |