Buscador que sustituya a Ctrl+F

daPhyre · #1 (**permalink**) 10/11/2008, 11:33

En muchas ocasiones se ha preguntado acerca de como insertar un buscador en una página. Este es más o menos similar, pero quiero hacer énfasis en como es diferente para que no me den las soluciones que a los demás.

Tengo una larga lista de definiciones en una página .html, me gustaría al principio de esta agregar una caja de texto que funcione como buscador dentro de esa misma página. Por lo mismo, no me funcionan otras soluciones como "Poner el buscador de Google" ni nada similar...

Mi solución actual es decirle al usuario que presione Ctrl+F, pero supongo que no funciona igual en todos los navegadores, y si pudiera facilitarle al usuario con una caja al principio que haga esa misma solución, estaría muy contento (y mis usuarios posiblemente también)

Mikmoro · #2 (**permalink**) 10/11/2008, 11:54

Aunque no tengo ni idea, yo empezaría a investigar por este camino:
- usar una función de autocompletado con ajax
http://sentidoweb.com/2006/05/18/aja...s-de-texto.php
- poner un ID a cada elemento de la lista de definición
- hacer con javascript que al presionar vaya al enlace interno con el ID

Supongo que sería posible.

David · #3 (**permalink**) 10/11/2008, 11:56

No veo necesario la comunicación con el servidor para buscar en la página actual (o sea, no veo necesidad de usar AJAX).

Sí, se puede hacer con Javascript, pero yo que tú haría uno desde el principio porque los que he encontrado por ahí... :-p.

Saludos

.

Mikmoro · #4 (**permalink**) 10/11/2008, 12:13

Hola, David.
Lo de AJAX lo digo porque se supone que es un buscador, y si el visitante no conoce el término exacto que desea buscar, será más difícil mandarlo a su lugar, mientras que con la técnica de autocompletado que pongo en el enlace aparecerían los términos posibles conforme vas escribiendo. Los términos están en el array del propio script sin necesidad de comunicación con el servidor (creo), en el ejemplo del enlace.

Revísalo a ver si estoy en lo cierto o lo he entendido mal.

David · #5 (**permalink**) 10/11/2008, 12:30

Hola, Mikmoro.

En realidad, sí se comunica con el servidor, con un array se refiere a que los países están en un PHP en el servidor en un array y no en una base de datos.

Explicando de forma simple, al escribir un texto en el select, se envía una petición al servidor con ese texto, el servidor ejecuta el PHP que lo que hace es buscar en el array todos los países que empiecen con esas letras, luego, devuelve un XML con esos países, con Javascript convertimos ese XML en un array y lo mostramos en el select. Algo así.

Mikmoro · #6 (**permalink**) 10/11/2008, 12:38

Bueno, qué tonto, si no qué sentido tendría usar Ajax

Me había parecido que el array estaba en el propio script.

De todas maneras, ya que pretende no usar un buscador al uso, quizá podría ser buena solución, no lo sé. Voy a pensar un poco (sí, mejor

).

talmente · #7 (**permalink**) 10/11/2008, 12:40

Esto es un buscador interno que funciona muy bien y es muy facil de implementar

http://www.tipue.com/products/tipueJS/

daPhyre · #8 (**permalink**) 10/11/2008, 12:43

Gracias por las sugerencias, veo que ya han analizado sus propias propuestas

Lo de los ID suena factible, pero quería algo más sencillo como el buscador por default de los navegadores. Lo tomaré en cuenta de igual forma, aunque cualquier alternativa extra es bien recibida

JavierB · #9 (**permalink**) 10/11/2008, 12:53

Mensaje movido al foro de JavaScript desde CSS.

Saludos,

Panino5001 · #10 (**permalink**) 10/11/2008, 13:00

Fijate si te sirve:

Código:

<!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>

Mikmoro · #11 (**permalink**) 10/11/2008, 13:05

Esto es lo que decía, David:

http://www.araudi.net/autocompletado...ompletado.html

Seguramente no es muy ortodoxo, pero era lo primero que se me había ocurrido. He puesto los nombres separados para obligar a saltar hasta el sitio.

Desde luego esto no tiene nada que ver con la solución de un experto (Panino5001), que seguramente será lo más lógico.

Panino5001 · #12 (**permalink**) 10/11/2008, 13:21

Experto? Gracias, Mikel, pero no, más bien un suertudo que aprende de sus muchos errores (o trata de apender)

David · #13 (**permalink**) 10/11/2008, 18:01

Cita:

Iniciado por Mikmoro

Esto es lo que decía, David:

http://www.araudi.net/autocompletado...ompletado.html

Sigo sin entender la relación con la búsqueda en la misma página

.

Según las pruebas que hice sigue siendo la misma cosa, usa AJAX para solicitar al servidor (paises.php) los datos (países) que empiecen por una determinada cadena, devuelve un XML que finalmente es interpretado por Javascript y agregado al select.

P.S.: WOW

Panino5001 por el código, es el más nítido que encontré hasta la fecha para realizar la búsqueda

.

Mikmoro · #14 (**permalink**) 10/11/2008, 18:09

Pues la cosa es que una vez seleccionado, si pulsas en buscar te lleva directamente a la palabra seleccionada (prueba con una de las que están en la lista de abajo, como bulgaria.

DaPhyre decía que tenía una lista de definiciones, y queria que al introducir la palabra esto no funcionan como un buscador normal ofreciendo resultados, sino que te llevara a donde está la palabra en la propia pàgina.

Ese es el fundamento de lo que he puesto. La lista con ajax es para introducir únicamente palabras existentes, sino sería casi inútul.

David · #15 (**permalink**) 10/11/2008, 18:18

Podría jurarte que no entendí la gracia del código

.

Bueno, seguro que alguna forma habrá de hacerlo funcionar como mencionas, pero no he logrado

, escribí "bolivia" en el input text, y me apareció en la lista para seleccionar, pero nada más que eso.

Saludos

.

Mikmoro · #16 (**permalink**) 10/11/2008, 18:29

Prueba con Bulgaria y mira a dónde va el cursor.

David · #17 (**permalink**) 10/11/2008, 18:33

mmm, probé y sigue sin pasar nada

.

Mirando la Consola de Errores, dice datos is null, voy a ver qué puede ser.

Mikmoro · #18 (**permalink**) 10/11/2008, 18:38

Debe ser un elemento de la lista forzosamente: escribes "bu", aparece "Bulgaria", picas con el ratón y pulsas buscar.
A ver si así te da error.

David · #19 (**permalink**) 10/11/2008, 19:01

Ufff, por fin, lo siento por tantas preguntas acerca del código

.

Bueno, quizás la idea le sirva a daPhyre.

Saludos

.

daPhyre · #20 (**permalink**) 11/11/2008, 00:02

¿Había puesto el Post en CSS? Creí que lo había puesto en web general o HTML

Pues ya he revisado el código de panino5001, es interesante el subrayado de la palabra, no precisamente lo que buscaba

Veré si puedo adaptarlo...

Aunque ahora revisando mejor lo que pretendo, ¿Como haré para desplazar la página sin identificadores? Comienzo a pensar que quizá no sea tan posible, ya lo analizaré. Gracias

David · #21 (**permalink**) 11/11/2008, 05:13

Pues de la misma forma como se agrega el color amarillo, puedes agregar identificadores para que vaya a esa parte de la página.

palaciob · #22 (**permalink**) 04/11/2009, 05:05

Cita:

Iniciado por David

Pues de la misma forma como se agrega el color amarillo, puedes agregar identificadores para que vaya a esa parte de la página.

Hola, quisiera saber si me podrás decir como agregar los identificadores. Desde ya gracias.