Autocompletar formularios usando Ajax y PHP

IvanDdraig · #1 (**permalink**) 11/08/2014, 10:23

Hola que tal amigos, espero se encuentren bien tengo un pequeño problema resulta que quiero hacer que con ajax me auto complete los campos de u n formulario, como por ejemplo escribo el nombre de una persona y si esta persona esta registrada en la base de datos, se auto completen los demás campos siempre y cuando el usuario exista, aun soy un principiante en esto, y tengo estos códigos, si me muestra el listado de las personas existentes en la base de datos, pero no me auto completa los demás campos, nos se donde pueda estar el error.

alumno.php

Código PHP:

  
<?php 

     

    $conexion = new mysqli('localhost','root','metallica','COPLADEMUN'); 

    $Nombre_Agrupacion = $_POST['Nombre_Agrupacion']; 

    $consulta = "Select Domicilio, Colonia, Telefono FROM NuevoOficio WHERE Nombre_Agrupacion = '%$Nombre_Agrupacion%'"; 

 
    $result = $conexion->query($consulta); 

     

    $respuesta = new stdClass(); 

    if($result->num_rows > 0){ 

        $fila = $result->fetch_array(); 

        $respuesta->Domicilio = $fila['Domicilio']; 

        $respuesta->Colonia = $fila['Colonia']; 

        $respuesta->Telefono = $fila['Telefono'];         

    } 

    echo json_encode($respuesta); 

 
?>

buscaralumno.php

Código PHP:

  <?php 

 
    $conexion = new mysqli('localhost','root','metallica','COPLADEMUN'); 

    $Nombre_Agrupacion = $_GET['term']; 

    $consulta = "select Nombre_Agrupacion FROM NuevoOficio WHERE Nombre_Agrupacion LIKE '%$Nombre_Agrupacion%'"; 

 
    $result = $conexion->query($consulta); 

 
    if($result->num_rows > 0){ 

    while($fila = $result->fetch_array()){ 

        $Nombres[] = $fila['Nombre_Agrupacion'];         

    } 

    echo json_encode($Nombres); 

} 

 
?>

index.php

Código PHP:

   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento sin título</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

        <link href="css/jqueryui.css" type="text/css" rel="stylesheet"/>

        <script>

            $(document).ready(function(){   

                $( "#Nombre_Agrupacion" ).autocomplete({

                    source: "buscaralumno.php",

                    

                });

                

                $("#Nombre_Agrupacion").focusout(function(){

                    $.ajax({

                        url:'alumno.php',

                        type:'POST',

                        dataType:'json',

                        data:{ Nombre_Agrupacion:$('#Nombre_Agrupacion').val()}

                    }).done(function(respuesta){

                        $("#Domicilio").val(respuesta.Domicilio);

                        $("#Colonia").val(respuesta.Colonia);

                        $("#Telefono").val(respuesta.Telefono);

                    });

                });                         

            });

        </script>

                    

    </head>

<body>

        

        <form>

            <p>

              <label for="Nombre_Agrupacion">Nombre o Agrupacion:</label>

              <input type="text" id="Nombre_Agrupacion" name="Nombre_Agrupacion" value=""/>

            </p>

            <p>

              <label for="Domicilio">Domicilio:</label>

              <input type="text" id="Domicilio" name="Domicilio" value=""/>

            </p>

            <p>

              <label for="Colonia">Colonia:</label>

              <input type="text" id="Colonia" name="Colonia" value=""/>

            </p>

            <p>

              <label for="Telefono">Telefono:</label>

              <input type="text" id="Telefono" name="Telefono" value=""/>

            </p>

    </form>

</body>

</html>

espero puedan ayudarme en esto :D

oscurogt · #2 (**permalink**) 11/08/2014, 11:29

No se que es lo que hace esto

Código Javascript:

Ver original$("#Nombre_Agrupacion").focusout(function(){ 
                    $.ajax({ 
                        url:'alumno.php', 
                        type:'POST', 
                        dataType:'json', 
                        data:{ Nombre_Agrupacion:$('#Nombre_Agrupacion').val()} 
                    }).done(function(respuesta){ 
                        $("#Domicilio").val(respuesta.Domicilio); 
                        $("#Colonia").val(respuesta.Colonia); 
                        $("#Telefono").val(respuesta.Telefono); 
                    }); 
                });

Pero tu problema es con jquery y no con php. tu solución es la siguiente

Código Javascript:

Ver original$(document).ready(function(){    
                $( "#Nombre_Agrupacion" ).autocomplete({ 
                    source: "buscaralumno.php", 
                     minLength: 1, //cuantas letras son necesarias escribir para la busqueda
                select: function(event, ui) {
                    $('#domicilio').val(ui.item.domicilio);
            $('#colonia').val(ui.item.colonia);
                    $('#telefono').val(ui.item.telefono);
                },
                messages: {
                noResults: '',
                results: function() {} //para que no te salga el mensaje de cuantos resultados encontró
                });

Código PHP:

Ver original$conexion = new mysqli('localhost','root','metallica','COPLADEMUN');  
    $Nombre_Agrupacion = $_GET['term'];  
    $consulta = "select Nombre_Agrupacion FROM NuevoOficio WHERE Nombre_Agrupacion LIKE '%$Nombre_Agrupacion%'";  
 
    $result = $conexion->query($consulta);  
 
    if($result->num_rows > 0){  
    while($fila = $result->fetch_array()){  
$row_array['direccion'] = $row['direccion'];
$row_array['colonia'] = $row['colonia'];
$row_array['telefono'] = $row['telefono'];
$row_array['value'] = $row['nombre_agrupacion'];
array_push($return_arr,$row_array);       
    }    
}  
$cn->close();
echo json_encode($return_arr);

prueba con esto.

Alexis88 · #3 (**permalink**) 11/08/2014, 11:33

Creo que es por la forma en como guardas los datos antes de enviar la respuesta. En buscaralumno.php, usas un array al que luego conviertes en objeto JSON, mientras que en alumno.php usas un objeto estándar. Quizá si lo intentas hacer como en el otro archivo, pueda funcionar, pero indicando el índice correspondiente para cada elemento.

Por otro lado, si solamente deseas obtener un registro (supongo que el autocompletado es para los datos de una persona o similar), no es necesario usar un bucle.

Saludos