Busqueda en DHTML

TheWolF · #1 (**permalink**) 13/07/2005, 01:12

Buenas,

Veréis, quiero hacer una búsqueda en dhtml que resulte visualmente atractivo. Es decir:

En un textbox el usuario va escribiendo el nombre que quiere buscar y en la parte inferior del textbox se va filtrando según va escribiendo, tipo a las aplicaciones de windows...

He hecho este código pero no me funciona bien.

<html>
<head>
<title>Busqueda</title>
</head>
<script language="JavaScript">
var empresas = new array("Empresa1", "Empresa2", "Empresa3", "Empresa4", "Empresa5");
function filtrar(texto)
{
var ncaracteres = texto.length;
var texto_comprar = "";
var texto_original = texto;
var empresas_filtro = new array();

j=0;
for (i=0; i<empresas.length; i++)
{
texto_original = texto_original.substring(0,ncaracteres);
texto_comparar = empresas[i].substring(0,ncaracteres);
if(texto_original == texto_comparar)
{
empresas_filtro[j]=empresas[i];
j++;
}
}

empresas=null;

empresas=new array();

for (i=0; i<empresas_filtro.length;i++)
{
empresas[i]=empresas_filtro[i];
}
empresas_filtro=null;
}

</script>
<body>
<div id="emp">
</div>
</body>
</html>

El asunto es que la función no la he podido probar ya que es una función que funcionará en un evento del input, pero lo que no consigo es hacer la impresión del array....

Ni con el innerHTML, ni con document.write... y si pongo en el body:

<script type="text/javascript">
document.write("hola");
</script>

Si que funciona pero no puedo imprimir el array que he declarado en la parte superior de la página.

Busco lograr una interface dinámica, ya que esto es una prueba y el array de DHTML será bidimensional y a la hora de imprimir la empresa ya filtrada será un enlace, no estoy buscando el meter los resultados en un objeto de un formulario.

Espero vuestras noticias y espero que podáis echarme un cable.

Gracias y un saludo.

KarlanKas · #2 (**permalink**) 13/07/2005, 01:36

No sé si me ha quedado claro pero ¿sería algo así?

contenido="";
for(a=0;a<empresas.length;a++){
continente=document.getElementById('emp');
contenido+='<a href="'+empresas[a]['enlace']+'">'+empresas[a]+'</a><br>';
}
continente.innerHTML=contenido;

Teniendo en cuenta que es un array bidimensional (tal y como dices).

TheWolF · #3 (**permalink**) 13/07/2005, 01:46

Buenas Karlankas,

He dejado el html de esta manera:

<html>
<head>
<title>Busqueda</title>
</head>
<script language="JavaScript">
var empresas = new array("Empresa1", "Empresa2", "Empresa3", "Empresa4", "Empresa5");
function filtrar(texto)
{
var ncaracteres = texto.length;
var texto_comprar = "";
var texto_original = texto;
var empresas_filtro = new array();

j=0;
for (i=0; i<empresas.length; i++)
{
texto_original = texto_original.substring(0,ncaracteres);
texto_comparar = empresas[i].substring(0,ncaracteres);
if(texto_original == texto_comparar)
{
empresas_filtro[j]=empresas[i];
j++;
}
}

empresas=null;

empresas=new array();

for (i=0; i<empresas_filtro.length;i++)
{
empresas[i]=empresas_filtro[i];
}
empresas_filtro=null;
}
contenido="";
for(a=0;a<empresas.length;a++){
continente=document.getElementById('emp');
contenido+='<a href="'+empresas[a]+'">'+empresas[a]+'</a><br>';
}
continente.innerHTML=contenido;
</script>
<body>
<div id="emp">
</div>
</body>
</html>

Ya habia probado, aunque no a imprimir todo el contenido del array, a imprimir una de las posiciones del array, el asunto está en que el error que me genera es que el array no está definido...

Sintácticamente creo que está todo correcto, pero algo debe ir mal para que me de un error, claro está :)

Espero tus noticias, gracias y un saludo.

KarlanKas · #4 (**permalink**) 13/07/2005, 01:52

Javascript es muy quisquilloso con las mayusculas. Un array se crea así:

variable=new Array();

y no así:

variable=new array();

Es decir, Array debe escribirse con la primera letra en mayúsculas. He hecho unos cambios en tu código. Dime si te va bien ahora:

Código PHP:

  <head>

<title>Busqueda</title>

 
<script language="JavaScript">

 var empresas = new Array("Empresa1", "Empresa2", "Empresa3", "Empresa4", "Empresa5");

function filtrar(texto)

{

var ncaracteres = texto.length;

var texto_comprar = "";

var texto_original = texto;

var empresas_filtro = new array();

 
j=0;

for (i=0; i<empresas.length; i++)

{

texto_original = texto_original.substring(0,ncaracteres);

texto_comparar = empresas[i].substring(0,ncaracteres);

if(texto_original == texto_comparar)

{

empresas_filtro[j]=empresas[i];

j++;

}

}

 
empresas=null;

 
empresas=new array();

 
for (i=0; i<empresas_filtro.length;i++)

{

empresas[i]=empresas_filtro[i];

}

empresas_filtro=null;

}

function inicio(){

contenido="";

for(a=0;a<empresas.length;a++){

continente=document.getElementById('emp');

contenido+='<a href="'+empresas[a]+'">'+empresas[a]+'</a><br>';

}

continente.innerHTML=contenido;}

</script>

</head>

<body onload="inicio()">

 <div id="emp">

 </div>

</body>

</html>

Un saludo!

TheWolF · #5 (**permalink**) 13/07/2005, 02:06

Buenas de nuevo, gracias por tan prontas respuestas.

El código me ha quedado de la siguiente manera sin generarme ningún tipo de error pero no con el resultado deseado.

Código:

<html>
<head>
	<title>Busqueda</title>
</head>
<script language="JavaScript">
var empresas = new Array("Empresa1", "Empresa2", "Empresa3", "Empresa4", "Empresa5");
function filtrar(texto)
{
	var ncaracteres = texto.length;
	var texto_comprar = "";
	var texto_original = texto;
	var empresas_filtro = new Array();
	alert(texto_original);
	j=0;
	for (i=0; i<empresas.length; i++)
	{
		texto_original = texto_original.substring(0,ncaracteres);
		texto_comparar = empresas[i].substring(0,ncaracteres);
		if(texto_original == texto_comparar)
		{
			empresas_filtro[j]=empresas[i];
			j++;
		}
	}
	contenido="";
	for(a=0;a<empresas_filtro.length;a++)
	{
		continente=document.getElementById('emp');
		contenido+='<a href="'+empresas_filtro[a]+'">'+empresas_filtro[a]+'</a><br>';
	}
}
function inicio(){
contenido="";
for(a=0;a<empresas.length;a++){
continente=document.getElementById('emp');
contenido+='<a href="'+empresas[a]+'">'+empresas[a]+'</a><br>';
}
continente.innerHTML=contenido;}
</script>
</head>
<body onload="inicio()">
<form name="form">
<input type="Text" name="empresa" onkeydown="javascript:filtrar(document.form.empresa.value);">
</form>
<div id="emp">
</div>
</body>
</html>

Probando el texto que envío en el evento del input siempre me envia el texto con caracter anterior, es decir, he probado el evento onkeypress y onkeydown.

Si introduzco "a" en la caja de texto, primero envía "vacio" y si luego pulso la la "b" envia "a".... pero bueno, eso es otra historia, el asunto es que no me varía el array ya imprimido.

Supongo que debería vaciar el contenido del <div> y luego volver a rellenar el contenido del div con el array nuevo.

Gracias y un saludo.

TheWolF · #6 (**permalink**) 13/07/2005, 03:10

Buenas a todos,

Solución a lo que buscaba en este post: http://www.forosdelweb.com/showthread.php?t=316164

Os pasteo el código:

Código HTML:

<html>
<head>
	<title>Busqueda</title>
</head>
<script language="JavaScript">
var empresas = new Array("Empresa1", "Empresa2", "Empresa3", "Empresa4", "Empresa5", "Empresa10");
function filtrar()
{
	var texto = document.form.empresa.value;
	var ncaracteres = texto.length;
	var texto_comparar = "";
	var texto_original = texto;
	var texto_contenedor ="";
	var empresas_filtro = new Array();
	j=0;
	for (i=0; i<empresas.length; i++)
	{
		texto_original = texto_original.substring(0,ncaracteres+1);
		texto_comparar = empresas[i].substring(0,ncaracteres);
		if(texto_original == texto_comparar)
		{
			empresas_filtro[j]=empresas[i];
			j++;
		}
	}

	
	contenido="";
	for(a=0;a<empresas_filtro.length;a++)
	{
		continente=document.getElementById('emp');
		contenido+='<a href="'+empresas_filtro[a]+'">'+empresas_filtro[a]+'</a><br>';
	}
	continente.innerHTML=contenido;
}

function inicio()
{
	contenido="";
	for(a=0;a<empresas.length;a++)
	{
		continente=document.getElementById('emp');
		contenido+='<a href="'+empresas[a]+'">'+empresas[a]+'</a><br>';
	}
	continente.innerHTML=contenido;
}
</script>
</head>
<body onload="inicio()">
<form name="form">
<input type="Text" name="empresa" onkeyup="javascript:filtrar();">
</form>
<div id="emp">
</div>
</body>
</html>

Gracias por todo y un saludo.