Foros del Web - Ver Mensaje Individual - Autocompletar Ajax y PHP

jakuam · #1 (**permalink**) 06/09/2011, 18:13

Estimados no puedo hacer funcionar este autocompletar me tira Undifined .. espero su ayuda ..

el codigo ajax

Código:

function asignaVariables2()
{
	
	v2=1; nuevaBusqueda2=1; busqueda2=null; ultimaBusquedaNula2=null;
	divLista2=document.getElementById("lista2");
	inputLista2=document.getElementById("alojar");
	elementoSeleccionado2=0;
	ultimoIdentificador2=0;
}

function nuevoAjax2()
{ 
	
	var xmlhttp=false; 
	try 
	{ 
		// Creacion del objeto AJAX para navegadores no IE
		xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); 
	}
	catch(e)
	{ 
		try
		{ 
			
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
		} 
		catch(E) { xmlhttp=false; }
	}
	if (!xmlhttp && typeof XMLHttpRequest!="undefined") { xmlhttp=new XMLHttpRequest(); } 

	return xmlhttp; 
}

function eliminaEspacios2(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 nuevoDato2()
{
	inputLista2.value=""; nuevaBusqueda2=1; busqueda2=null; ultimaBusquedaNula2=null;

	
	divMensaje.innerHTML="";

	valor1=eliminaEspacios2(valor1);
	var reg2=/(^[a-zA-Z0-9.@ ]{4,40}$)/;
	if(!reg2.test(valor1)) 
	{
		divMensaje.innerHTML="El texto ingresado contiene caracteres o longitud inválida";
	}
	else
	{
		
		boton.disabled=true; inputIngreso2.disabled=true; inputLista2.disabled=true;
		inputIngreso2.value="Ingresando...";
	
		var ajax1=nuevoAjax2();
		ajax1.open("POST", "index_proceso_name_hotel.php", true);
		ajax1.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		ajax1.send("ingreso2="+valor1);
			
		ajax1.onreadystatechange=function()
		{
			if (ajax1.readyState==4)
			{
				// Borro el contenido del input
				inputIngreso2.value="";
				// Habilito campos y boton nuevamente
				boton.disabled=false; inputIngreso2.disabled=false; inputLista2.disabled=false;
				divMensaje.innerHTML=ajax1.responseText;
			}
		}
	}
}

function formateaLista2(valor1)
{
	var x=0, verificaExpresion=new RegExp("^("+valor1+")", "i");
	
	while(divLista2.childNodes[x]!=null)
	{
		
		divLista2.childNodes[x].id=x+1;
		
		divLista2.childNodes[x].innerHTML=divLista2.childNodes[x].innerHTML.replace(verificaExpresion, "<span class='busca'>$1</span>");
		x++;
	}
}

function limpiaPalabra2(palabra)
{
	
	palabra=palabra.replace(/<span class="busca">/i, "");
	palabra=palabra.replace(/<\/span>/i, "");
	return palabra;
}

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

function nuevaCadenaNula2(valor1)
{
	
	if(coincideBusqueda2(valor1, ultimaBusquedaNula2)==0) ultimaBusquedaNula2=valor1;
}

function busquedaEnBD2()
{
	
	var valor1=inputLista2.value;
	
	if((coincideBusqueda2(valor1, busqueda2)==1 && nuevaBusqueda2==0) || coincideBusqueda2(valor1, ultimaBusquedaNula2)==1) return 0;
	else return 1;
}

function filtraLista2(valor1)
{
	// Funcion encargada de modificar la lista de nombres en base a la nueva busqueda
	var x=0;

	while(divLista2.childNodes[x]!=null)
	{
		
		divLista2.childNodes[x].innerHTML=limpiaPalabra2(divLista2.childNodes[x].innerHTML);
		if(coincideBusqueda2(limpiaPalabra2(divLista2.childNodes[x].innerHTML), valor1)==0)
		{
			
			divLista2.removeChild(divLista2.childNodes[x]);
			x--;
		}
		x++;
	}
}

function reiniciaSeleccion2()
{
	mouseFuera2(); 
	elementoSeleccionado2=0;
}

function navegaTeclado2(evento)
{
	var teclaPresionada2=(document.all) ? evento.keyCode : evento.which;
	
	switch(teclaPresionada2)
	{
		case 40:
		if(elementoSeleccionado2<divLista2.childNodes.length)
		{
			mouseDentro2(document.getElementById(parseInt(elementoSeleccionado2)+1));
		}
		return 0;
		
		case 38:
		if(elementoSeleccionado2>1)
		{
			mouseDentro2(document.getElementById(parseInt(elementoSeleccionado2)-1));
		}
		return 0;
		
		case 13:
		if(divLista2.style.display=="block" && elementoSeleccionado2!=0)
		{
			clickLista2(document.getElementById(elementoSeleccionado2))
		}
		return 0;
		
		default: return 1;
	}
}	

function rellenaLista2()
{
	var valor1=inputLista2.value;

	
	var reg2=/(^[a-zA-Z0-9.@ ]{2,40}$)/;
	if(!reg2.test(valor1)) divLista2.style.display="none";
	else
	{
		if(busquedaEnBD2()==0)
		{	
			busqueda2=valor1;
			
			filtraLista2(valor1);
			// Si no quedan elementos para mostrar en la lista
			if(divLista2.childNodes[0]==null) { divLista2.style.display="none"; nuevaCadenaNula2(valor1); }
			else { reiniciaSeleccion2(); formateaLista2(valor1); }
		}
		else
		{	
			busqueda2=valor1;

			var ajax1=nuevoAjax2();
			ajax1.open("POST", "index_proceso_name_hotel.php?", true);
			ajax1.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			ajax1.send("busqueda2="+valor1);
		
			ajax1.onreadystatechange=function()
			{	
				if (ajax1.readyState==4)
				{
					if(!ajax1.responseText) { divLista2.style.display="none"; }
					else 
					{
						var respuesta=new Array(2);
						respuesta=ajax1.responseText.split("&");
				
						/* Obtengo un valor que representa si tengo que ir a BD en las proximas 
						busquedas con cadena similar */
						nuevaBusqueda2=respuesta[0];
				
						// Si se obtuvieron datos los muestro
						if(respuesta[1]!="vacio") 
						{ 
							divLista2.style.display="block"; divLista2.innerHTML=respuesta[1]; 
							// Coloco en negrita las palabras
							reiniciaSeleccion2();
							formateaLista2(valor1); 
						}
						// En caso contrario seteo la busqueda actual como una busqueda sin resultados
						else nuevaCadenaNula2(valor1);
					}
				}
			}
		}
	}
}

function clickLista2(elemento)

{
	
	v2=1;
	valor1=limpiaPalabra2(elemento.innerHTML); 
	busqueda2=valor1; inputLista2.value=valor1;
	divList2.style.display="none"; elemento.className="normal";
	
}
function rellenaroculto2(valores) {
document.form2.verid2.value=valores;
}

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

function mouseDentro2(elemento)
{
	mouseFuera2();
	elemento.className="resaltado";
	// Establezco el nuevo elemento seleccionado
	elementoSeleccionado2=elemento.id;
}

el codigo PHP

Código PHP:

  <?php require_once('../Connections/reservas.php'); ?> 
 
<?php 
function validaIngreso2($parametro) 
{ 
     
    $parametro=trim($parametro); 
     
    if(eregi("^[a-zA-Z0-9.@ ]{4,40}$", $parametro)) return TRUE; 
    else return FALSE; 
} 
 
function validaBusqueda2($parametro) 
{ 
 
    if(eregi("^[a-zA-Z0-9.@ ]{2,40}$", $parametro)) return TRUE; 
    else return FALSE; 
} 
 
if(isset($_POST["busqueda2"])) 
{ 
    $valor1=$_POST["busqueda2"]; 
    if (strlen($valor1)>1) { 
    if(validaBusqueda2($valor1)) 
    { 
        mysql_select_db($database_reservas,$reservas) or die(mysql_error()); 
         
        //$consulta=mysql_query("SELECT nombre FROM autocompletador WHERE MATCH(nombre) AGAINST('".$valor."*' IN BOOLEAN MODE) LIMIT 0, 22") or die(mysql_error()); 
        $consulta=mysql_query("SELECT alojar_id, nombre, tipo_alojamiento FROM alojamientos WHERE nombre LIKE '%".$valor1."%' LIMIT 0,10"); 
         
         
         
        $cantidad=mysql_num_rows($consulta); 
        if($cantidad==0) 
        { 
            /* 0: no se vuelve por mas resultados 
            vacio: cadena a mostrar, en este caso no se muestra nada */ 
            echo "0&vacio"; 
        } 
        else 
        { 
            if($cantidad>12) echo "1&";  
            else echo "0&"; 
     
            $cantidad=1; 
            while(($registro=mysql_fetch_assoc($consulta)) && $cantidad<=6) 
            { 
             
            $nombre = $registro['nombre']; 
            $tipo = $registro['tipo_alojamiento']; 
            $ids = $registro['alojar_id']; 
             
         
         
             
             echo "<script>  "; 
                echo "document.getElementById('verid2').value='".$ids."';"; 
                echo "</script>"; 
                echo "<div onClick=\"clickLista2(this);\" onMouseOver=\"mouseDentro2(this);\" width = 100%>".$tipo.",".$nombre."</div>"; 
                
                // Muestro solo 20 resultados de los 22 obtenidos 
                $cantidad++; 
                  
            } 
        } 
    } 
} 
} 
 
?>

El codigo del imput

Código:

<input name="alojar" type="text" class="form1" id="alojar"
					onfocus="if(document.getElementById('lista2').childNodes[0]!=null &amp;&amp; this.value!='') { filtraLista2(this.value); formateaLista2(this.value); 
						reiniciaSeleccion2(); document.getElementById('lista2').style.display='block'; }" 
					onblur="if(v2==1) document.getElementById('lista2').style.display='none';" 
					onkeyup="if(navegaTeclado2(event)==1) {
						clearTimeout(ultimoIdentificador2); 
						ultimoIdentificador2=setTimeout('rellenaLista2()', 500); }" />

espero su ayuda gracias