Div abajo de un imput

[pato12]

Hola,
¿Como puedo poner un div abajo de un input?
No puedo sacar las coordenadas del input, por eso no lo puedo poner.
Gracias
Salu2

[David]

No entiendo muy bien la pregunta, ya que se supone que puedes poner el div directamente en el código HTML debajo del input.

[pato12]

Pero el imput aparese abeses mas arriba o mas abajo, depende del usuario.
Me refiero a sacar las coordenadas del input y poner el div debajo de el.
Gracias
Salu2

[David]

No entiendo, ¿cómo que depende del usuario? . Debería depender del código . ¿Puedo ver el código que estás usando?

[pato12]

No estoy usando ningun codigo, el div no mueve, pero si el input depende de lo largo que escribe el usuario.

[David]

Me refiero al código HTML.

[pato12]

Es un para un autocompletar:

Código HTML:

<input  tabindex="1" autocomplete="off" name="buscar_form_bottom" type="text" id="buscar_form_bottom" onfocus="vas_act(this,'Buscar:',true);if(document.getElementById(divName).childNodes[0]!=null && this.value!='Buscar:') { r=1;filtraLista(this.value); formateaLista(this.value); reiniciaSeleccion(); }" onblur="vas_act(this,'Buscar:',false);if(v==1){ document.getElementById(divName).style.display='none';}" value="<? if(isset($_GET['buscar_form_bottom']) and $_GET['buscar_form_bottom']!="") echo $_GET['buscar_form_bottom']; else echo "Buscar:";?>" size="23" maxlength="50" title="Busca tu canción favorita." onkeyup="if(navegaTeclado(event)==1) {
						clearTimeout(ultimoIdentificador); 
						ultimoIdentificador=setTimeout('rellenaLista()', 1); }"/>
					<div align="left" id="lista" onmouseout="v=1;" onmouseover="v=0;"></div> 

Gracias
Salu2

[David]

Yo he probado tal y como está y el div efectivamente queda debajo del input, ¿por qué no pones el código completo o mejor aún un enlace a tu página?.

[pato12]

Hola,

Código HTML:

<style>
#lista
{
	position:absolute;
	width:200px;
	background-color:#FFFFFF;
	color:#000000;
	z-index:1;
	top:74px;
	left:871px;
	text-decoration: none;
	border-top-width: 1px;
	border-right-width: 2px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #999999;
	border-right-color: #000000;
	border-bottom-color: #333333;
	border-left-color: #CCCCCC;
	height: auto;
	display: none;
}
</style>
<input  tabindex="1" autocomplete="off" name="buscar_form_bottom" type="text" id="buscar_form_bottom" onfocus="vas_act(this,'Buscar:',true);if(document.getElementById(divName).childNodes[0]!=null && this.value!='Buscar:') { r=1;filtraLista(this.value); formateaLista(this.value); reiniciaSeleccion(); }" onblur="vas_act(this,'Buscar:',false);if(v==1){ document.getElementById(divName).style.display='none';}" value="<? if(isset($_GET['buscar_form_bottom']) and $_GET['buscar_form_bottom']!="") echo $_GET['buscar_form_bottom']; else echo "Buscar:";?>" size="23" maxlength="50" title="Busca tu canción favorita." onkeyup="if(navegaTeclado(event)==1) {
						clearTimeout(ultimoIdentificador); 
						ultimoIdentificador=setTimeout('rellenaLista()', 1); }"/>
					<div align="left" id="lista" onmouseout="v=1;" onmouseover="v=0;"></div> 

Pero si el usuario escribe mucho, el div "lista" me queda muy arriba y lejos del input.

[David]

¿Para qué asignas position:absolute, además de top y left al div?. Creo que quitando esos atributos por defecto se posiciona debajo del input como debe ser .

[pato12]

Esque si le saco, me cuando lo ago apareser me mueve las cosas de abajo y se deforma la web.

[David]

Es por eso que desde el principio te dije que va a ser más fácil si vemos el HTML completo.

[pato12]

Es un codigo en AJAX, que lo unico que queria hacer con javascript es acomodar el div debajo del input. Es un auto completar que me paso un amigo:

Código HTML:

<script>
function asignaVariables()
{
	divName="lista";
	v=1; nuevaBusqueda=1; busqueda=null; ultimaBusquedaNula=null;
	divLista=document.getElementById(divName);
	inputLista=document.getElementById("buscar_form_bottom");
	elementoSeleccionado=0;
	ultimoIdentificador=0;
	var r=0;
}

function eliminaEspacios(cadena)
{
	var x=0, y=cadena.length-1;
	while(cadena.charAt(x)==" ") x++;	
	while(cadena.charAt(y)==" ") y--;	
	return cadena.substr(x, y-x+1);
}
function formateaLista(valor)
{
	var x=0, verificaExpresion=new RegExp("^("+valor+")", "i");
	
	while(divLista.childNodes[x]!=null)
	{
		divLista.childNodes[x].id=x+1;
		divLista.childNodes[x].innerHTML=divLista.childNodes[x].innerHTML.replace(verificaExpresion, "<b>$1</b>");
		x++;
	}
}

function limpiaPalabra(palabra)
{
	palabra=palabra.replace(/<b>/i, "");
	palabra=palabra.replace(/<\/b>/i, "");
	return palabra;
}

function coincideBusqueda(palabraEntera, primerasLetras)
{
	if(primerasLetras==null) return 0;
	var verificaExpresion=new RegExp("^("+primerasLetras+")", "i");
	if(verificaExpresion.test(palabraEntera)) return 1;
	else return 0;
}

function nuevaCadenaNula(valor)
{
	if(coincideBusqueda(valor, ultimaBusquedaNula)==0) ultimaBusquedaNula=valor;
}

function busquedaEnBD()
{
	var valor=inputLista.value;
	
	if((coincideBusqueda(valor, busqueda)==1 && nuevaBusqueda==0) || coincideBusqueda(valor, ultimaBusquedaNula)==1) return 0;
	else return 1;
}

function filtraLista(valor)
{
	var x=0;

	while(divLista.childNodes[x]!=null)
	{
		divLista.childNodes[x].innerHTML=limpiaPalabra(divLista.childNodes[x].innerHTML);
		if(coincideBusqueda(limpiaPalabra(divLista.childNodes[x].innerHTML), valor)==0)
		{
			divLista.removeChild(divLista.childNodes[x]);
			x--;
		}
		x++;
	}
}

function reiniciaSeleccion()
{
	mouseFuera(); 
	elementoSeleccionado=0;
}

function navegaTeclado(evento)
{
	var teclaPresionada=(document.all) ? evento.keyCode : evento.which;
	
	switch(teclaPresionada)
	{
		case 40:
		if(elementoSeleccionado<divLista.childNodes.length)
		{
			mouseDentro(document.getElementById(parseInt(elementoSeleccionado)+1));
		}
		return 0;
		
		case 38:
		if(elementoSeleccionado>1)
		{
			mouseDentro(document.getElementById(parseInt(elementoSeleccionado)-1));
		}
		return 0;
		
		case 13:
		if(ver(divName) && elementoSeleccionado!=0)
		{
			clickLista(document.getElementById(elementoSeleccionado))
		}
		return 0;
		
		default: return 1;
	}
}	

function rellenaLista()
{
	var valor=inputLista.value;

	var reg=/(^[a-zA-Z0-9.@ ]{2,40}$)/;
	if(!reg.test(valor)) cerrar(divName);
	else
	{
		if(busquedaEnBD()==0)
		{	
			busqueda=valor;
	
			filtraLista(valor);
			if(divLista.childNodes[0]==null) { cerrar(divName); nuevaCadenaNula(valor); }
			else { reiniciaSeleccion(); formateaLista(valor); }
		}
		else
		{	
			busqueda=valor;

			var ajax=getXMLHttpRequest();
			ajax.open("POST", "auto_complet.php?", true);
			ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			ajax.send("busqueda="+valor+"&por="+buscador.bus_por.value);
		   
			ajax.onreadystatechange=function()
			{	
				if (ajax.readyState==4)
				{
					if(!ajax.responseText) { cerrar(divName); }
					else 
					{
						var respuesta=new Array(2);
						respuesta=ajax.responseText.split("&");
				
						nuevaBusqueda=respuesta[0];
				
						if(respuesta[1]!="vacio") 
						{ 
							ver(divName); divLista.innerHTML=respuesta[1]; 
							reiniciaSeleccion();
							formateaLista(valor); 
						}
						else nuevaCadenaNula(valor);
					}
				}
			}
		}
	}
}

function clickLista(elemento)

{
	v=1;
	valor=limpiaPalabra(elemento.innerHTML); 
	busqueda=valor; inputLista.value=valor;
	buscador.submit();
	cerrar(divName); elemento.className="normal";
	v=0;
}


function mouseFuera()
{
	if(elementoSeleccionado!=0 && document.getElementById(elementoSeleccionado)) document.getElementById(elementoSeleccionado).className="normal"; 
}

function mouseDentro(elemento)
{
	mouseFuera();
	elemento.className="resaltado";
	elementoSeleccionado=elemento.id;
}</script>
<style>
#lista
{
	position:absolute;
	width:200px;
	background-color:#FFFFFF;
	color:#000000;
	z-index:1;
	top:74px;
	left:871px;
	text-decoration: none;
	border-top-width: 1px;
	border-right-width: 2px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #999999;
	border-right-color: #000000;
	border-bottom-color: #333333;
	border-left-color: #CCCCCC;
	height: auto;
	display: none;
}
</style>
<input  tabindex="1" autocomplete="off" name="buscar_form_bottom" type="text" id="buscar_form_bottom" onfocus="vas_act(this,'Buscar:',true);if(document.getElementById(divName).childNodes[0]!=null && this.value!='Buscar:') { r=1;filtraLista(this.value); formateaLista(this.value); reiniciaSeleccion(); }" onblur="vas_act(this,'Buscar:',false);if(v==1){ document.getElementById(divName).style.display='none';}" value="<? if(isset($_GET['buscar_form_bottom']) and $_GET['buscar_form_bottom']!="") echo $_GET['buscar_form_bottom']; else echo "Buscar:";?>" size="23" maxlength="50" title="Busca tu canción favorita." onkeyup="if(navegaTeclado(event)==1) {
						clearTimeout(ultimoIdentificador); 
						ultimoIdentificador=setTimeout('rellenaLista()', 1); }"/>
					<div align="left" id="lista" onmouseout="v=1;" onmouseover="v=0;"></div> 

Me anda de 10, pero lo unico malo es el div que se mueve.

[pato12]

Nadie tiene una idea de acomodar un div debajo de un input, como el de YouTube.com que te lo pone debajo del input.