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.