Ver Mensaje Individual
  #13 (permalink)  
Antiguo 30/09/2008, 16:03
Avatar de pato12
pato12
 
Fecha de Ingreso: septiembre-2007
Ubicación: Salta
Mensajes: 1.620
Antigüedad: 17 años, 5 meses
Puntos: 101
Respuesta: Div abajo de un imput

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.
__________________
Half Music - www.halfmusic.com

Última edición por pato12; 30/09/2008 a las 16:31