Foros del Web » Programando para Internet » Javascript »

Buscador que sustituya a Ctrl+F

Estas en el tema de Buscador que sustituya a Ctrl+F en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/11/2008, 11:33
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 14 años, 5 meses
Puntos: 142
Buscador que sustituya a Ctrl+F

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)
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #2 (permalink)  
Antiguo 10/11/2008, 11:54
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 15 años, 10 meses
Puntos: 280
Respuesta: Buscador que sustituya a Ctrl+F

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.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 10/11/2008, 11:56
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 17 años, 3 meses
Puntos: 839
Respuesta: Buscador que sustituya a Ctrl+F

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 .
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #4 (permalink)  
Antiguo 10/11/2008, 12:13
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 15 años, 10 meses
Puntos: 280
Respuesta: Buscador que sustituya a Ctrl+F

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.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 10/11/2008, 12:30
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 17 años, 3 meses
Puntos: 839
Respuesta: Buscador que sustituya a Ctrl+F

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í.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #6 (permalink)  
Antiguo 10/11/2008, 12:38
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 15 años, 10 meses
Puntos: 280
Respuesta: Buscador que sustituya a Ctrl+F

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 ).
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 10/11/2008, 12:40
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 14 años, 9 meses
Puntos: 4
Respuesta: Buscador que sustituya a Ctrl+F

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

http://www.tipue.com/products/tipueJS/
  #8 (permalink)  
Antiguo 10/11/2008, 12:43
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 14 años, 5 meses
Puntos: 142
Respuesta: Buscador que sustituya a Ctrl+F

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
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #9 (permalink)  
Antiguo 10/11/2008, 12:53
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 20 años, 6 meses
Puntos: 772
Respuesta: Buscador que sustituya a Ctrl+F

Mensaje movido al foro de JavaScript desde CSS.

Saludos,
  #10 (permalink)  
Antiguo 10/11/2008, 13:00
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.143
Antigüedad: 18 años, 2 meses
Puntos: 832
Respuesta: Buscador que sustituya a Ctrl+F

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>
  #11 (permalink)  
Antiguo 10/11/2008, 13:05
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 15 años, 10 meses
Puntos: 280
Respuesta: Buscador que sustituya a Ctrl+F

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.
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 10/11/2008, 13:21
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.143
Antigüedad: 18 años, 2 meses
Puntos: 832
Respuesta: Buscador que sustituya a Ctrl+F

Experto? Gracias, Mikel, pero no, más bien un suertudo que aprende de sus muchos errores (o trata de apender)
  #13 (permalink)  
Antiguo 10/11/2008, 18:01
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 17 años, 3 meses
Puntos: 839
Respuesta: Buscador que sustituya a Ctrl+F

Cita:
Iniciado por Mikmoro Ver Mensaje
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 .
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #14 (permalink)  
Antiguo 10/11/2008, 18:09
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 15 años, 10 meses
Puntos: 280
Respuesta: Buscador que sustituya a Ctrl+F

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.
__________________
Visita mi nueva web idplus.org
  #15 (permalink)  
Antiguo 10/11/2008, 18:18
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 17 años, 3 meses
Puntos: 839
Respuesta: Buscador que sustituya a Ctrl+F

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 .
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #16 (permalink)  
Antiguo 10/11/2008, 18:29
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 15 años, 10 meses
Puntos: 280
Respuesta: Buscador que sustituya a Ctrl+F

Prueba con Bulgaria y mira a dónde va el cursor.
__________________
Visita mi nueva web idplus.org
  #17 (permalink)  
Antiguo 10/11/2008, 18:33
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 17 años, 3 meses
Puntos: 839
Respuesta: Buscador que sustituya a Ctrl+F

mmm, probé y sigue sin pasar nada .

Mirando la Consola de Errores, dice datos is null, voy a ver qué puede ser.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #18 (permalink)  
Antiguo 10/11/2008, 18:38
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 15 años, 10 meses
Puntos: 280
Respuesta: Buscador que sustituya a Ctrl+F

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.
__________________
Visita mi nueva web idplus.org
  #19 (permalink)  
Antiguo 10/11/2008, 19:01
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 17 años, 3 meses
Puntos: 839
Respuesta: Buscador que sustituya a Ctrl+F

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

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

Saludos .
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #20 (permalink)  
Antiguo 11/11/2008, 00:02
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 14 años, 5 meses
Puntos: 142
Respuesta: Buscador que sustituya a Ctrl+F

¿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
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #21 (permalink)  
Antiguo 11/11/2008, 05:13
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 17 años, 3 meses
Puntos: 839
Respuesta: Buscador que sustituya a Ctrl+F

Pues de la misma forma como se agrega el color amarillo, puedes agregar identificadores para que vaya a esa parte de la página.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #22 (permalink)  
Antiguo 04/11/2009, 05:05
 
Fecha de Ingreso: noviembre-2009
Mensajes: 1
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Buscador que sustituya a Ctrl+F

Cita:
Iniciado por David Ver Mensaje
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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:13.