Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Clone Google Suggest

Estas en el tema de Clone Google Suggest en el foro de Frameworks JS en Foros del Web. Bueno, pues programando programando me encontré está página beta de google http://www.google.com/webhp?complete=1&hl=en , bueno en realidad no me la encontré sino que los chicos de ...
  #1 (permalink)  
Antiguo 09/05/2006, 10:20
perrogrun
Invitado
 
Mensajes: n/a
Puntos:
Clone Google Suggest

Bueno, pues programando programando me encontré está página beta de google http://www.google.com/webhp?complete=1&hl=en , bueno en realidad no me la encontré sino que los chicos de Saeta.net me la chivaron y me pregunté: ¿Por qué no hacer algo parecido para mi página?

Y el resultado aquí lo teneis I/M Suggest Beta 0.1

Está hecho con ajax y asp. Pronto me pondré a hacerlo con php, coldfusion y asp.net.

Todavía no funciona muy bien pero bueno aquí lo teneis. Si quereis cuando lo pula un poco cuelgo los fuentes y entre todos lo mejoramos. ¿Qué os parece?
  #2 (permalink)  
Antiguo 10/05/2006, 02:11
Avatar de yesik  
Fecha de Ingreso: octubre-2004
Ubicación: Orense
Mensajes: 292
Antigüedad: 19 años, 6 meses
Puntos: 1
Es bueno, una pregunta, llamas a bd cada vez que metes 1 letra ó bajas todos los registros de la inicial?
__________________
Inmuebles de Galicia:: www.inmueblevirtual.net
Compartir piso Galicia:: www.inmueblevirtual.net/foro
  #3 (permalink)  
Antiguo 10/05/2006, 04:54
perrogrun
Invitado
 
Mensajes: n/a
Puntos:
Miro cada vez que se hace keypress, ya que la db es muy grande como para bajarla enterna, tardaría muchísimo en cargar la página supongo.
  #4 (permalink)  
Antiguo 11/05/2006, 06:31
 
Fecha de Ingreso: junio-2005
Ubicación: Madrid, España
Mensajes: 288
Antigüedad: 18 años, 10 meses
Puntos: 1
Prueba a dejarlo en un XML y leerlo del XML es mucho mas rapido
  #5 (permalink)  
Antiguo 11/05/2006, 09:12
perrogrun
Invitado
 
Mensajes: n/a
Puntos:
Bueno se puede probar pero, como hago para buscar entre los nodos del xml lo que escribe el usuario?
  #6 (permalink)  
Antiguo 11/05/2006, 17:50
Avatar de B**
B**
 
Fecha de Ingreso: enero-2006
Ubicación: Monterrey,Mexico
Mensajes: 952
Antigüedad: 18 años, 3 meses
Puntos: 3
Hola perrogrun, me gustaria saber como hiciste para que el usuario pueda navegar con las flechas del teclado en el div de los resultados.. por que yo estoy haciendo algo parecido..
  #7 (permalink)  
Antiguo 12/05/2006, 03:02
perrogrun
Invitado
 
Mensajes: n/a
Puntos:
Verás al principio creía que iba a ser lo más complicado pero en realidad no lo es tanto.

Aquí te pongo un ejemplo, corta y pega y guarda como html.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Probando</title>
	<script language="JavaScript">
	/*
	SCRIPT: PERROGRUN
	SI TIENES DUDAS: [email protected]
	WWW.DOUBLEMEDIA.ORG
	*/
	//esta función crea eventos para ciertos objetos
	function addEvent(obj,event_name,func_name){
	if (obj.attachEvent){
		obj.attachEvent("on"+event_name, func_name);
	}else if(obj.addEventListener){
		obj.addEventListener(event_name,func_name,true);
	}else{
		obj["on"+event_name] = func_name;
	}
}
	
	var celdaactual =1;// variable para saber en qué fila estamos
	var totalfilas= 15;// variable para saber cuantas filas tenemos en total
	
	addEvent(document,"keydown",buscar);
	/*con esto lo que se hace es llamar a la función "Buscar" cada vez que ocurre un onkeydown en el documento*/
	
	
	//Esta función pone  la primera línea en azul
	function primerafila(){
			form1.celdaactual.value ='1';
			celdaactual = '1';
			document.getElementById('tr'+celdaactual).style.backgroundColor='#3786dd';
			document.getElementById('tr'+celdaactual).style.color='#ffffff';
			document.getElementById('celda2'+celdaactual).style.backgroundColor='#3786dd';
			document.getElementById('celda2'+celdaactual).style.color='#000000';
	}
	
	//Esta función es la que hace que todo funcione
	function buscar(e){
	
	totalfilas=form1.totalfilas.value;//meto en totalfilas el valor que hay en el form
	
if (totalfilas>0)//Si hay filas
var code = (document.all) ? e.keyCode : e.which; //Con esto miro el código de la tecla pulsada tanto para ie como para firefox


switch (code){//con esto hago diferentes cosas según la tecla pulsada
case 13: case 9:
	//codigo para cuando se pulsa enter
break;


case 40: //codigo para cuando se pulsa la tecla "abajo"
	
	
	celdaactual =parseInt(form1.celdaactual.value) ;//le digo la celda actual
	
	celdaanterior = celdaactual;//paso el valor a celdaanterior
	celdaactual +=1;//le sumo 1 para tener el valor de la celda siguiente
	if (document.getElementById('celda'+celdaactual)) {//compruebo que la celda realmente existe
	form1.celdaactual.value = celdaactual;//meto el valor en el form
	
	if (document.getElementById('tr'+celdaanterior)){//compruebo que la celda realmente existe
	document.getElementById('tr'+celdaanterior).style.backgroundColor='#ffffff';//pinto la nueva de azul y blanco
	document.getElementById('tr'+celdaanterior).style.color='#000000';
	document.getElementById('tr'+celdaactual).style.backgroundColor='#3786dd';
	document.getElementById('tr'+celdaactual).style.color='#ffffff';
	document.getElementById('celda2'+celdaanterior ).style.backgroundColor='#ffffff';//pinto la vieja de color normal
	document.getElementById('celda2'+celdaanterior ).style.color='green';
	document.getElementById('celda2'+celdaactual).style.backgroundColor='#3786dd';
	document.getElementById('celda2'+celdaactual).style.color='#000000';}
	}
	break;

case 38: //codigo para cuando se pulsa la tecla "arriba". Se repite lo de arriba pero en vez de sumar se resta
	
	celdaactual =parseInt(form1.celdaactual.value) ;
	
	celdaanterior = celdaactual;
	celdaactual -=1;
	if (document.getElementById('celda'+celdaactual)) {
	form1.celdaactual.value = celdaactual;
	if (document.getElementById('tr'+celdaanterior)){
	document.getElementById('tr'+celdaanterior ).style.backgroundColor='#ffffff';
	document.getElementById('tr'+celdaanterior ).style.color='#000000';
	document.getElementById('tr'+celdaactual).style.backgroundColor='#3786dd';
	document.getElementById('tr'+celdaactual).style.color='#ffffff';
	document.getElementById('celda2'+celdaanterior ).style.backgroundColor='#ffffff';
	document.getElementById('celda2'+celdaanterior ).style.color='green';
	document.getElementById('celda2'+celdaactual).style.backgroundColor='#3786dd';
	document.getElementById('celda2'+celdaactual).style.color='#000000';}
	}
	break;


default:

	break;
} }
	</script>
</head>

<body onload="primerafila()">
<form name="form1" onsubmit="return comprobar()">
<input type="hidden" name="totalfilas" value="15">
<input type="hidden" name="celdaactual" value="1">
<input type="hidden" name="enviar" value="no"><br>
<div id="resultados"  >
<table width="326" cellpadding="0" cellspacing="0" id="tablaresultados" style="border:1px solid gray">
	
	<tr id="tr1"   style="cursor:pointer;">
		<td >
			<input type="hidden" id="dato1" name="dato1" value="e-bussines">
			<div  id="celda1">e-bussines</div>
		</td>
		<td align="right"  id="celda21" style="color:green;font-size:9px;"><nobr>
			 1 Resultado
		</td>
	</tr>
	<tr id="tr2"   style="cursor:pointer;">
		<td >
			<input type="hidden" id="dato2" name="dato2" value="E-BUSSINES COMO UNA OPORTUNIDAD DE NEGOCIO ">
			<div  id="celda2">E-BUSSINES COMO UNA OPORTUNIDAD DE NEGOCIO </div>
		</td>
		<td align="right"  id="celda22" style="color:green;font-size:9px;"><nobr>
			 1 Resultado
		</td>
	</tr>
	<tr id="tr3"   style="cursor:pointer;">
		<td >
			<input type="hidden" id="dato3" name="dato3" value="Ejercicios Resueltos">
			<div  id="celda3">Ejercicios Resueltos</div>
		</td>
		<td align="right"  id="celda23" style="color:green;font-size:9px;"><nobr>
			 1 Resultado
		</td>
	</tr>
	<tr id="tr4"   style="cursor:pointer;">
		<td >
			<input type="hidden" id="dato4" name="dato4" value="El americano de la calle: slang">
			<div  id="celda4">El americano de la calle: slang</div>
		</td>
		<td align="right"  id="celda24" style="color:green;font-size:9px;"><nobr>
			 1 Resultado
		</td>
	</tr>
	<tr id="tr5"   style="cursor:pointer;">
		<td >
			<input type="hidden" id="dato5" name="dato5" value="El efecto de precarga en Flash">
			<div  id="celda5">El efecto de precarga en Flash</div>
		</td>
		<td align="right"  id="celda25" style="color:green;font-size:9px;"><nobr>
			 1 Resultado
		</td>
	</tr>
	<tr id="tr6"  style="cursor:pointer;">
		<td >
			<input type="hidden" id="dato6" name="dato6" value="El inglés en los negocios">
			<div  id="celda6">El inglés en los negocios</div>
		</td>
		<td align="right"  id="celda26" style="color:green;font-size:9px;"><nobr>
			 1 Resultado
		</td>
	</tr>
	<tr id="tr7" style="cursor:pointer;">
		<td >
			<input type="hidden" id="dato7" name="dato7" value="El lenguaje de programación C# ">
			<div  id="celda7">El lenguaje de programación C# </div>
		</td>
		<td align="right"  id="celda27" style="color:green;font-size:9px;"><nobr>
			 1 Resultado
		</td>
	</tr>
	<tr id="tr8"  style="cursor:pointer;">
		<td >
			<input type="hidden" id="dato8" name="dato8" value="El Netcat. La navaja suiza de los hackers y administradores ">
			<div  id="celda8">El Netcat. La navaja suiza de los hackers y administradores </div>
		</td>
		<td align="right"  id="celda28" style="color:green;font-size:9px;"><nobr>
			 1 Resultado
		</td>
	</tr>
	<tr id="tr9"   style="cursor:pointer;">
		<td >
			<input type="hidden" id="dato9" name="dato9" value="El Registro de Windows "LA MADRE DEL CORDERO"">
			<div  id="celda9">El Registro de Windows "LA MADRE DEL CORDERO"</div>
		</td>
		<td align="right"  id="celda29" style="color:green;font-size:9px;"><nobr>
			 1 Resultado
		</td>
	</tr>
	<tr id="tr10"   style="cursor:pointer;">
		<td >
			<input type="hidden" id="dato10" name="dato10" value="Emule">
			<div  id="celda10">Emule</div>
		</td>
		<td align="right"  id="celda210" style="color:green;font-size:9px;"><nobr>
			 1 Resultado
		</td>
	</tr>
	<tr id="tr11"   style="cursor:pointer;">
		<td >
			<input type="hidden" id="dato11" name="dato11" value="Emule Avanzado">
			<div  id="celda11">Emule Avanzado</div>
		</td>
		<td align="right"  id="celda211" style="color:green;font-size:9px;"><nobr>
			 1 Resultado
		</td>
	</tr>
	<tr id="tr12"  style="cursor:pointer;">
		<td >
			<input type="hidden" id="dato12" name="dato12" value="Encriptar tus conversaciones del MSN Messenger">
			<div  id="celda12">Encriptar tus conversaciones del MSN Messenger</div>
		</td>
		<td align="right"  id="celda212" style="color:green;font-size:9px;"><nobr>
			 1 Resultado
		</td>
	</tr>
	<tr id="tr13"   style="cursor:pointer;">
		<td >
			<input type="hidden" id="dato13" name="dato13" value="Ensamblador">
			<div  id="celda13">Ensamblador</div>
		</td>
		<td align="right"  id="celda213" style="color:green;font-size:9px;"><nobr>
			 1 Resultado
		</td>
	</tr>
	<tr id="tr14"   style="cursor:pointer;">
		<td >
			<input type="hidden" id="dato14" name="dato14" value="Excel">
			<div  id="celda14">Excel</div>
		</td>
		<td align="right"  id="celda214" style="color:green;font-size:9px;"><nobr>
			7 Resultados 
		</td>
	</tr>
	<tr id="tr15"  style="cursor:pointer;">
		<td >
			<input type="hidden" id="dato15" name="dato15" value="Extendiendo Ruby con C">
			<div  id="celda15">Extendiendo Ruby con C</div>
		</td>
		<td align="right"  id="celda215" style="color:green;font-size:9px;"><nobr>
			 1 Resultado
		</td>
	</tr>
	</table>
</div>
</form>


</body>
</html>

Parece mucha tela para cortar pero creo que si miras bien las funciones no lo es tanto. Te he puesto comentarios en todo el código para que entiendas más o menos lo que voy haciendo.
  #8 (permalink)  
Antiguo 12/05/2006, 17:04
Avatar de B**
B**
 
Fecha de Ingreso: enero-2006
Ubicación: Monterrey,Mexico
Mensajes: 952
Antigüedad: 18 años, 3 meses
Puntos: 3
Muchas Gracias, lo voy a checar
  #9 (permalink)  
Antiguo 13/05/2006, 00:56
Avatar de B**
B**
 
Fecha de Ingreso: enero-2006
Ubicación: Monterrey,Mexico
Mensajes: 952
Antigüedad: 18 años, 3 meses
Puntos: 3
Mmmmmm sigo con algunas dudas.. mira yo tengo un suggest y funciona.. pero el usuario tiene que ir al resultado con el mouse.. y en tu ejemplo, me diste ya unos resultados ...
Mira.. te muestro mi ejemplo, y haber si me puedes ayudar un poco para como poder adaptar tu ejemplo al mio.. :S por q tengo q mostrarlo para un proyecto final..
[php]
Código HTML:
<html><head>
<script language="javascript">
                    function nuevoAjax(){
                    var xmlhttp=false;
                     try {
                      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                     } catch (e) {
                      try {
                       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                      } catch (E) {
                       xmlhttp = false;
                      }
                     }

                    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
                      xmlhttp = new XMLHttpRequest();
                    }
                    return xmlhttp;
                    }

            function carga()
                    {
                        var contenedor;
                        var otro;
                        var url;
                        url='bd_suggest.php?Buscar='+document.getElementById('Buscar').value;
                          ajax=nuevoAjax();

                          ajax.onreadystatechange=function() {
                           if (ajax.readyState==4 && ajax.status==200 ) {
                            suggest.innerHTML = ajax.responseText;
                              }
                            }
                               if(document.getElementById('Buscar').value != ''){
                        	       document.getElementById('suggest').style.display='';
                            	   document.getElementById('suggest').innerHTML='';
                                   ajax.open("GET",url,true);
                                   ajax.send(null)

                                }

                               else
                                    {
                        	       	document.getElementById('suggest').style.display='none';
                                    document.getElementById('suggest').innerHTML='';
                             	}
                    }



                        function Get(val){
                            document.getElementById('Buscar').value	= val;
                            document.getElementById('Buscar').focus();
                        	document.getElementById('suggest').style.display='none';
                            document.getElementById('suggest').innerHTML='';

                        }


</script>
<style>
div#suggest{
	font:verdana;
	border-width: 1;
	border-style: solid;
	border-color: #D1D7DC;
	background-color: #E8E8E8;
}
a:hover{
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	list-style-type: none;
	cursor: pointer;
	background-color: #FFFFFF;
	width: 100%;
	display: block;
	text-decoration: none;
}
p{
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	list-style-type: none;
	cursor: pointer;
	background-color: #E8E8E8;
	width: 100%;
}
a {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	list-style-type: none;
	cursor: pointer;
	background-color: #E8E8E8;
	width: 100%;
	display: block;
	text-decoration: none;
}
</style>
</head>
<title>Suggest</title>
<body>
<center>
<table>

  <tr>
   <td>
    <form name="form1">
    <input type="text" name="Buscar"  id="Buscar" size="50" AUTOCOMPLETE=OFF onKeyUp="carga();">
    <div id="suggest" style="display:none"></form>
    </div>
    <td>
   </tr>

</table>
</center>
<body> 
Código PHP:
<?php
            $servidor
"localhost";
            
$bd "prueba";
            
$user "root";
            
$pass "pass";

            
$con mysql_connect($servidor,$user,$pass) or die(mysql_error());
            
mysql_select_db($bd,$con)or die("Error".mysql_error());

            
$q $_GET['Buscar'];
            
$SQL="Select usuario from nombres where usuario Like '$q%'";
            
$res mysql_query($SQL,$con);
            
$row mysql_fetch_array($res);


           do{

             echo 
"<P><a href='javascript:' OnClick=\"Get('".$row[0]."')\">".$row[0]."</a></P>";


            }
            while(
$row mysql_fetch_array($res));
            
?>
Gracias de antemano..

Última edición por B**; 13/05/2006 a las 01:02
  #10 (permalink)  
Antiguo 04/12/2007, 08:28
 
Fecha de Ingreso: junio-2007
Mensajes: 152
Antigüedad: 16 años, 10 meses
Puntos: 0
Re: Clone Google Suggest

Cita:
Iniciado por B** Ver Mensaje
Mmmmmm sigo con algunas dudas.. mira yo tengo un suggest y funciona.. pero el usuario tiene que ir al resultado con el mouse.. y en tu ejemplo, me diste ya unos resultados ...
Mira.. te muestro mi ejemplo, y haber si me puedes ayudar un poco para como poder adaptar tu ejemplo al mio.. :S por q tengo q mostrarlo para un proyecto final..
[php]
Código HTML:
<html><head>
<script language="javascript">
                    function nuevoAjax(){
                    var xmlhttp=false;
                     try {
                      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                     } catch (e) {
                      try {
                       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                      } catch (E) {
                       xmlhttp = false;
                      }
                     }

                    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
                      xmlhttp = new XMLHttpRequest();
                    }
                    return xmlhttp;
                    }

            function carga()
                    {
                        var contenedor;
                        var otro;
                        var url;
                        url='bd_suggest.php?Buscar='+document.getElementById('Buscar').value;
                          ajax=nuevoAjax();

                          ajax.onreadystatechange=function() {
                           if (ajax.readyState==4 && ajax.status==200 ) {
                            suggest.innerHTML = ajax.responseText;
                              }
                            }
                               if(document.getElementById('Buscar').value != ''){
                        	       document.getElementById('suggest').style.display='';
                            	   document.getElementById('suggest').innerHTML='';
                                   ajax.open("GET",url,true);
                                   ajax.send(null)

                                }

                               else
                                    {
                        	       	document.getElementById('suggest').style.display='none';
                                    document.getElementById('suggest').innerHTML='';
                             	}
                    }



                        function Get(val){
                            document.getElementById('Buscar').value	= val;
                            document.getElementById('Buscar').focus();
                        	document.getElementById('suggest').style.display='none';
                            document.getElementById('suggest').innerHTML='';

                        }


</script>
<style>
div#suggest{
	font:verdana;
	border-width: 1;
	border-style: solid;
	border-color: #D1D7DC;
	background-color: #E8E8E8;
}
a:hover{
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	list-style-type: none;
	cursor: pointer;
	background-color: #FFFFFF;
	width: 100%;
	display: block;
	text-decoration: none;
}
p{
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	list-style-type: none;
	cursor: pointer;
	background-color: #E8E8E8;
	width: 100%;
}
a {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	list-style-type: none;
	cursor: pointer;
	background-color: #E8E8E8;
	width: 100%;
	display: block;
	text-decoration: none;
}
</style>
</head>
<title>Suggest</title>
<body>
<center>
<table>

  <tr>
   <td>
    <form name="form1">
    <input type="text" name="Buscar"  id="Buscar" size="50" AUTOCOMPLETE=OFF onKeyUp="carga();">
    <div id="suggest" style="display:none"></form>
    </div>
    <td>
   </tr>

</table>
</center>
<body> 
Código PHP:
<?php
            $servidor
"localhost";
            
$bd "prueba";
            
$user "root";
            
$pass "pass";

            
$con mysql_connect($servidor,$user,$pass) or die(mysql_error());
            
mysql_select_db($bd,$con)or die("Error".mysql_error());

            
$q $_GET['Buscar'];
            
$SQL="Select usuario from nombres where usuario Like '$q%'";
            
$res mysql_query($SQL,$con);
            
$row mysql_fetch_array($res);


           do{

             echo 
"<P><a href='javascript:' OnClick=\"Get('".$row[0]."')\">".$row[0]."</a></P>";


            }
            while(
$row mysql_fetch_array($res));
            
?>
Gracias de antemano..
Amigo la verdad que quiero hacer algo asi lo unico entro a tu pagina pero ese buscador no anda si el de google lab esta muy bueno me pasas los codigos de como lo hace google lab 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 02:07.