Foros del Web » Programando para Internet » Javascript »

Autocompletar Ajax y PHP - Problema

Estas en el tema de Autocompletar Ajax y PHP - Problema en el foro de Javascript en Foros del Web. 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; ...
  #1 (permalink)  
Antiguo 06/09/2011, 18:13
Avatar de jakuam  
Fecha de Ingreso: abril-2007
Mensajes: 354
Antigüedad: 16 años, 11 meses
Puntos: 0
Autocompletar Ajax y PHP - Problema

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
__________________
Jakuam
Reserva Hoteles Online
Turismo San Rafael Mendoza
  #2 (permalink)  
Antiguo 07/09/2011, 06:16
Avatar de Raziel_Ravenheart  
Fecha de Ingreso: agosto-2011
Ubicación: Ibagué, Tolima
Mensajes: 192
Antigüedad: 12 años, 7 meses
Puntos: 37
Respuesta: Autocompletar Ajax y PHP - Problema

Hola, jakuam. La verdad es que está un poco enredado tu código y sin comentarios, es un poco difícil saber que quiere hacer cada línea. No digo que no se pueda leer, pero si no tuvieramos que adivinar, y pudieramos saber que hace cada línea, o por lo menos cada función y saber en que orden se ejecutan, podríamos ayudarte en tu problema.

Por ahora mi recomendación es que quites esos manejadores de eventos de la etiqueta, por que ya se ven muy abarrotados, y los cargues justo cuando termina de cargar todo el contenido de la ventana, lo que quiero decir, es que dentro de tu código javascript, hagas algo como lo siguiente:

Código Javascript:
Ver original
  1. window.onload = function () {
  2.     document.getElementById("alojar").onfocus = funcion;
  3.     document.getElementById("alojar").onblur = funcion1;
  4.     document.getElementById("alojar").onkeyup = funcion2;
  5. }
  6.  
  7.  
  8. function funcion () {
  9.     if (document.getElementById('lista2').childNodes[0] != null  && this.value != '') {
  10.         filtraLista2(this.value);
  11.         formateaLista2(this.value);
  12.         reiniciaSeleccion2();
  13.         document.getElementById('lista2').style.display='block';
  14.     }
  15. }
  16.  
  17.  
  18. function funcion1 () {
  19.     if (v2==1)  {
  20.         document.getElementById('lista2').style.display='none';
  21.     }
  22. }
  23.  
  24.  
  25. function funcion2 () {
  26.     if (navegaTeclado2(event)==1) {
  27.         clearTimeout(ultimoIdentificador2);
  28.         ultimoIdentificador2 = setTimeout ('rellenaLista2()', 500);
  29.     }
  30. }

con esto hecho, el código de tu etiqueta queda aún más limpio y se verá solo lo que se necesita, es decir, quedaría así:

Código HTML:
Ver original
  1. <input name="alojar" type="text" class="form1" id="alojar" />

De esta manera el código será más entendible y si por algún motivo al revisarlo, te das cuenta del error, ya estarás un paso más cerca de crear código del modo recomendado. Y el código que provees al principio, lo hiciste tu o lo copiaste de algún lado?

Última edición por Raziel_Ravenheart; 07/09/2011 a las 06:18 Razón: Retirar asignacion de manejadores de eventos

Etiquetas: ajax, html, php, botones, autocompletado
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:59.