autocompletar mientras escribo

biffly · #1 (**permalink**) 09/08/2005, 08:52

hola, espero que el titulo, sea el correcto. Estoy teniendo barios problemas al intentar hacer un formulario de busqueda que a medida de que el usuario ba escribiendo el patron de busqueda, se valla llenando una lista con lo que se fue encontrando, ej: tengo que buscar un libro, en un textbox comienzo a ecribir el nombre y debajo (en una tabla me muetra los resultados. Normalmente trabajo con VB6 donde hacer esto no es un problema, pero con ASP no se si se podra

PD: los datos los tiene que buscar el una BD (SQL server)

espero que alguien me pueda orientar, gracias

mariano_donati · #2 (**permalink**) 09/08/2005, 09:03

no se puede hacer eso con asp, porque una vez que estás completando el parametro de búsqueda, todo el código asp ya fue ejecutado, y para volver a ejecutarlo tendrías que recargar la página. Imagino que se podría hacer con javascript, pero también imagino que sería una locura porque deberías descargar toda la información en el cliente a través de un array en javascript, e ir comprobando uno a uno los elementos de ese array para ver si concuerda con lo que el usuario va escribiendo. La verdad que no sé si será óptimo, calculo que no.
Seguro ya aparacerán más mensajes para clarificarte un poco más el tema.
Saludos!

Myakire · #3 (**permalink**) 09/08/2005, 09:06

En ASP NO se puede, por que ASP trabaja en el servidor, no en el cliente que es dónde se estará escribiendo. Pero con javascript si, checa este ejemplo de JavierB:

Código:

<html>
<head>
<title>Untitled</title>
<script>
function buscar(txt) {
  obj=document.getElementById('tabla');
  for (i=0;ele=obj.getElementsByTagName('tr')[i];i++) {
    celda = ele.getElementsByTagName('td')[1]
    dato = celda.innerHTML;
    iz = dato.substr(0,txt.length);
//    celda.style.display = (txt==iz) ? '' : 'none';
    ele.style.display = (txt==iz) ? '' : 'none';
  }
}
</script>
</head>
<body>
<input type="text" onkeyup="buscar(this.value)" />
<table id="tabla" border="1">
<tr><td>avion</td><td>avion</td></tr>
<tr><td>coche</td><td>bvion</td></tr>
<tr><td>aviador</td><td>avion</td></tr>
<tr><td>coger</td><td>bvion</td>
</table>
</body>
</html>

Aunque por experiencia te digo, que si la lista es de algunos cientos, se ve muuuuuy lento.

Saludos

biffly · #4 (**permalink**) 09/08/2005, 09:08

esa opcion paso por mi cabeza, la verdad no se si es mucha la infa a descargar en el cliente +- 1000 registros, no se si javascript podra manejar esa cantidad o si sera mucho para descargar, los registros tendrian que tener dos valores un numero (no ID) y una descripcion de no mas de 50 caracteres, que opinas?

mariano_donati · #5 (**permalink**) 09/08/2005, 09:12

fundamentalmente lo que te tiene que preocupar más que javascript, sería como soportará la computadora del cliente manejar tal cantidad de datos, ya que eso se trabajaría con la computadora del usuario.

Cap.Buscapina · #6 (**permalink**) 09/08/2005, 09:20

pues si, con ASP si se puede hacer lo que quieres, aunque hay que combinarlo con Javascript.
En este mismo sitio podes ingresar a un subforo nuevito reciensalido del horno llamado AJAX.(combina javascript con lenguajes del lado del servidor).
Claro que si la lista es un poco extensa ya se comenzaría a complicar los tiempos (como dice Myakire).
Pero que se puede...., se puede (reitero que tal vez el problema sea el tiempo).
Espero que te sirva.

PD: Si no busca la palabra AJAX en cualquier buscador y listo (aunque algunas ablarán de fútbol

).

Myakire · #7 (**permalink**) 09/08/2005, 09:23

aaahhhh, es cierto, al ver lo tardado que era con javascript, le intenté un rato con ajax motivado por el comportamiento de google suggest, pero no pude hecharlo andar y lo dejé por la paz.

biffly · #8 (**permalink**) 09/08/2005, 09:23

ok, estoy implementando la solucion recomendada por:Myakire, en 10min les comento como me fue, ACLARACION: esto es para una intranet, no creo que que sea un problema, en unos momentos les comento como me fue.....

orharo2003 · #9 (**permalink**) 09/08/2005, 09:26

Hola, yo he implementado algo similar pero en un sistema de facturación donde descargo 14,000 registros (la descripción y la clave).

No tuve que programar extra nada con javascript, pues sólo jale el control que usa el office para autocompletar su id de clase es : CLSID:8BD21D30-EC42-11CE-9E0D-00AA006002F3 y luego con javascript lo voy llenando.

inputdescripcion.AddItem("<%=trim(aTable1Values(de scripcion, iRowLoop)%>");

Ahora bien, en la intranet va excelente pues la descarga se lleva a cabo en 3 segundos.Ahora desde internet hay 2 factores a tomar en cuenta :

1.- ANCHO DE BANDA
2.- VELOCIDAD DEL PROCESADOR DEL CLIENTE

Para evitar ese problema, muchas veces mejor se omite esta situación cuando la cantidad de registros es alta.

Cap.Buscapina · #10 (**permalink**) 09/08/2005, 09:28

se me ocurre que para realizarlo mas rápido, cuando se ingrese la primer letra , mediante ajax, se optenga todas las cadenas que empiecen con esa letra para aprovechar algunos segundos que se van demorando mientras el usuario sigue escribiendo .
Y luego con javascript busque dentro del resultado obtenido, las cadenas que coincidadn con lo que fué escribiendo el usuario (parece un trabalengua pero tal ves sirva)

biffly · #11 (**permalink**) 09/08/2005, 09:32

no se si entendi lo que me decis, pero tengo un problema con los controles de office, ya que las maquinas clientes de la intranet son terminales en linux, no poseen office, ya intente colocar controles para mostrar graficos estadisticos y me fue imposible hacerlos funcionar en las terminales, de todas formas gracias por la sugerencia la voy a tener en cuenta para futuras ocaciones.

orharo2003 · #12 (**permalink**) 09/08/2005, 09:35

Si amigo, es una desventaja cuando no posees el office en máquinas cliente.

De todas formas te paso el dato, lo que pasa que aqui manejamos al 100% tecnologia microsoft

biffly · #13 (**permalink**) 09/08/2005, 09:47

Yo desarrollo hace mas de 8 años usando 100% tecnologia Microsoft, me da casa y comida para mi familia, pero hay que reconocer que Linux no es el futuro, sino que es el presente, no soy una de esas personas que discuten si en mejor o peor que win, aprobecho lo mejor que me brinda cada uno de los SO, la intranet en la que estoy trabajando esta conformada por 50 terminales(computadoras si HD) y dos servidores, el principal (w2k server) y uno en linux que provve sitema a las terminales, es muy practico y economico, y con las terminales podes hacer practicamente lo mismo que harias con cualquier PC de escritorio. Asi que les recomiendo: windows esta muy bien pero poder desarrollar para linux usando tecnologia de Microsoft es mejor, para nuestros clientes y para nos

biffly · #14 (**permalink**) 09/08/2005, 09:51

para quien este interesado, ANDA MUY BIEN gracias Myakire, este es el codigo de como lo implemente, saludos

Código:

<%@ LANGUAGE="VBSCRIPT" %>
<%
Set cn = Server.CreateObject("ADODB.Connection")
Set rsTMP = Server.CreateObject("ADODB.Recordset")
cn.Provider = "sqloledb"
ProvStr = "Server=?????????;Database=???????;UID=?????;PWD=??????;"
cn.Open ProvStr
%>
<html>

<head>
<meta http-equiv="Content-Language" content="es">
<style>
  body{
  scrollbar-arrow-color: #FFFFFF;
  scrollbar-3dlight-color: #FFFFFF;
  scrollbar-highlight-color: #C0C0C0;
  scrollbar-face-color: #000000;
  scrollbar-shadow-color: #C0C0C0;
  scrollbar-darkshadow-color: #000000;
  scrollbar-track-color: #000000;
  }
  a:link {  font-family: Tahoma, Verdana, Arial; color: #003366; text-decoration: none}
  a:visited {  font-family: Tahoma, Verdana, Arial; color: #003366; text-decoration: none}
  a:hover {  font-family: Tahoma, Verdana, Arial; color: #FF9900}
  a:active {  font-family: Tahoma, Verdana, Arial; color: #003366; text-decoration: none}
  </style>
<title>???????</title>
<link rel="stylesheet" type="text/css" href="../estilo.css">
<script>
function buscar(txt) {
  obj=document.getElementById('tabla');
  for (i=0;ele=obj.getElementsByTagName('tr')[i];i++) {
    celda = ele.getElementsByTagName('td')[1]
    dato = celda.innerHTML;
    iz = dato.substr(0,txt.length);
//    celda.style.display = (txt==iz) ? '' : 'none';
    ele.style.display = (txt==iz) ? '' : 'none';
  }
}
</script>
</head>
<body link="#000000" vlink="#000000" alink="#000000" text="#000000" bgcolor="#ffffff" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0." background="../images/SETEO/fondo.jpg" >
<div align="center">
	<table border="0" id="table1" cellspacing="0" cellpadding="2">
		<tr>
			<td bgcolor="#FFFFFF" class="TEXTO">CUENTA</td>
			<td bgcolor="#FFFFFF" class="TEXTO">&nbsp;</td>
			<td bgcolor="#FFFFFF" class="TEXTO">&nbsp;</td>
			<td bgcolor="#FFFFFF" class="TEXTO">
			<input type="text" onkeyup="buscar(this.value)" class="CUADROTEXTO" size="20" name="T1"></td>
		</tr>
		<tr>
			<td bgcolor="#FFFFFF" class="TEXTO" colspan="4">
			<div align="center">
				<table id="tabla" border="0" cellspacing="0" cellpadding="2">
					<%
					SQL="SELECT * FROM P_CUENTAS ORDER BY DESCRIPCION"
					RSTMP.Open SQL,CN
						WHILE NOT RSTMP.EOF 
					%>
					<tr>
						<td class="TEXTO"><%=RSTMP.Fields("CTA1")%>.<%=RSTMP.Fields("CTA2")%></td>
						<td class="TEXTO"><%=RSTMP.Fields("DESCRIPCION")%></td>
					</tr>
					<%
							RSTMP.MoveNext()
						WEND
					RSTMP.Close()
					%>
				</table>
			</div>
			</td>
		</tr>
	</table>
</div>
</body>

</html>

Myakire · #15 (**permalink**) 09/08/2005, 09:57

No se cuantos sean los registros que vas a mostrar, pero yo con poco más de 3000 lo tuve que eliminar. Si tuviera más tiempo le seguiría con Ajax por que la prueba de que se puede, como mencioné antes, es google suggest (http://www.google.com/webhp?complete=1&hl=en), pero entre que no tengo tiempo y entre que el ac.js esta bastante enredado, pues no le he atinado.

De todas forma suerte en tus desarrollos biffly

AlZuwaga · #16 (**permalink**) 09/08/2005, 10:02

Mi experiencia en filtrar un array de javascript (con datos obtenidos de una BD mediante ASP) en un "select multiple" fue buena, dependiendo de la cantidad de registros.
La velocidad de descarga no interesó mucho porque era para una intranet, aunque ahora lo estoy usando en un sitio accesible por una conexión normal a internet y no es tan lenta como imaginaba.

Ok, con unos 450 registros aprox fue bien. No fue pesado para el cliente.
Ahora, cuandi no filtré por provincia y mandé la lista completa de todas las localidades del país, unos 2100 registros, la cosa cambió. Al precionar una tecla para filtrar el "select multiple", se demoraba entre 5 y 7 segundos en hacer la tarea.
Ok, no era una computadora muy potente (lo malo es que es la que yo uso) pero sé que dentro de la intranet hay peores (el único consuelo que tengo es que por lo menos la mía es de las mejores de por aquí).

En fin, depende de la cantidad de elementos que vayas a manejar.

Pero me parece mejor la opción AJAX, que por cada letra precionada se vuelva a hacer una llamada a la fuente de datos para traer sólo los registros que comiencen por dicha letra (mejor dicho, por el conjunto de las ya existentes más la nueva precionada).. que "creo" es como google sugest lo hace.

saludos

biffly · #17 (**permalink**) 09/08/2005, 11:46

bueno, chicos, gracias a todos por la ayuda,voy a ver esto de AJAX, hay que hacerle frente a las casas nuevas, para a quien le interese estoy listando menos de 400 registros, funcion a muy bien, no creo que lo cambie ya que esta cantidad de registros no varia mucho, es decir un puede crecer o achicarce 10%, pero no mas, saludos:D