Búsqueda en una página estática

#1 (**permalink**) 09/03/2011, 02:51

Hola de nuevo!!
Me surgió un problemilla que por más que busco no encuentro lo que quiero.

Tengo una página estática un poco larga, quiero que poner un buscador con jQuery que me busque directamente los resultados, es decir escribes la palabra que sea y te muestre los resultados.

Sabeis alguna forma de hacerlo?

Saludos. :pc :pc

IsaBelM · #2 (**permalink**) 09/03/2011, 08:07

si te conformas con que no sea jquery. no recuerdo quienes son los autores de estos códigos, pero seguro que no andan muy lejos de aquí

Cita:

<!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').getElementsByT agName('*');
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=documen t.getElementById('tabla').innerHTML.split('}}').jo in('</span>').split('{{').join('<span style="background-color: yellow">');

}
function resetear(){
document.getElementById('tabla').innerHTML=origina l;
}
window.onload=function(){
original=document.getElementById('tabla').innerHTM L;
}
</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>

Cita:

<!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 (cadena.substr(0,parseInt(largo_cadena)).match(rgE x)) {
var marca = cadena.substr(0,parseInt(largo_cadena)).replace(rg Ex, 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>
<div id="texto">Esto es una prueba para resaltar caracteres o palabras de este texto prueba</div>
<form method="" action="" name="" autocomplete="off">
<input type="text" value="" id="terminos" onkeyup="Resaltar(this.value,event);" />
</form>
</body>
</html>

#3 (**permalink**) 09/03/2011, 08:27

Perfecto, muchas gracias!!

#4 (**permalink**) 09/03/2011, 08:56

Pero hay un problemilla, me busca tambien en el codigo html, como se puede quitar eso?

IsaBelM · #5 (**permalink**) 09/03/2011, 10:06

cual de los dos códigos estás usando?? creo que el segundo. si es así, usa el primero

#6 (**permalink**) 09/03/2011, 11:23

Ok. Ahora lo prueba.