JQuery - Explicacion autocompleate

 
Vista:

Explicacion autocompleate

Publicado por Ruisu (1 intervención) el 22/07/2015 04:22:33
Saludos a todos.

En principio gracias por leer mi duda (ayuda).

Bueno pues en si es eso encontré un código que pretendo implementar pero todas las variables son las mismas y como estoy intentando aprender jquery pues no doy una.

El código es el siguiente. (Realizare comentarios sobre el código para su corrección de ser necesario)

Es un formulario el cual comprendo, a cada input se le asigna un nombre y una Id.

1
2
3
4
5
6
7
8
9
10
<form>
   <label for="matricula">Matricula:</label>
   <input type="text" id="matricula" name="matricula" value=""/> <br/>
   <label for="nombre">Nombre:</label>
   <input type="text" id="nombre" name="nombre" value=""/> <br/>
   <label for="paterno">Paterno:</label>
   <input type="text" id="paterno" name="paterno" value=""/> <br/>
   <label for="materno">Materno:</label>
   <input type="text" id="materno" name="materno" value=""/>
</form>

Después viene el SCRIPT donde todo se vuelve tinieblas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).ready(function(){                                  //Se declara la funcion.
    $( "#matricula" ).autocomplete({                          //$('#matricula') esta llamando el id del input y hacer autocomplete
    	source: "buscaralumno.php",                          //Indica que el array se encuentra en el php buscar alumnos
    	minLength: 2                                                      //empezara a buscar a partir del segundo carácter escrito
    });
 
    $("#matricula").focusout(function(){                    // Aquí me pierdo ¿esta matricula es la declarada anteriormente?
    	$.ajax({                                                                 // llamada a ajax
      	    url:'alumno.php',                                            //Se buscaran los datos a acompletar en alumnos php
    	    type:'POST',                                                    //Se pasaran los datos por POST
    	    dataType:'json',                                              //Se pasaran los datos por de tipo JSON
    	    data:{ matricula:$('#matricula').val()}        //estas matriculas ni idea
    	}).done(function(respuesta){                          //Cuando lo encuentra se imprime la respuesta
    	    $("#nombre").val(respuesta.nombre);     //Se imprime en el ID input nombre la respuesta de nombre
    	    $("#paterno").val(respuesta.paterno);     //Se imprime en el ID input paterno la respuesta de paterno
    	    $("#materno").val(respuesta.materno);   //Se imprime en el ID input materno la respuesta de materno
    	});
    });
});


PHP Buscar alumnos

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$matricula = $_GET['term'];
                                                         //Esta matricula es la que toma del ID los valores del $('#matricula') del  autocomplete
 
$conexion = new mysqli('servidor','usuario','password','basedatos',3306);
                                                         //Coneccion a la BD mysql
 
$consulta = "SELECT matricula FROM tblalumno WHERE matricula LIKE '%$matricula%'";
                                                       //Genera el SELECT y busca el valor tomado por GET que ahora es matricula :S
 
$result = $conexion->query($consulta);
                                                      //Genera un query de los datos encontrados
 
 
if($result->num_rows > 0){                                          //Compara el result si no es cero
    while($fila = $result->fetch_array()){                     //realiza un while dando la fila del result en un array
        $matriculas[] = $fila['matricula'];                         //Otras matriculas que ni idea
    }
echo json_encode($matriculas);                              //manda matriculas por json pero cual matriculas?? el que se tomo
                                                                                           desde el input
}


alumnos.php //mas matriculas :S haaaaaa

1
2
3
4
5
6
7
8
9
10
11
12
13
$matricula = $_POST['matricula'];
$conexion = new mysqli('servidor','usuario','password','basedatos',3306);
$consulta = "SELECT nombre,paterno,materno FROM tblalumno WHERE matricula = '$matricula'";
$result = $conexion->query($consulta);
 
$respuesta = new stdClass();
if($result->num_rows > 0){
    $fila = $result->fetch_array();
    $respuesta->nombre = $fila['nombre'];
    $respuesta->paterno = $fila['paterno'];
    $respuesta->materno = $fila['materno'];
}
echo json_encode($respuesta);
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Entiendo una parte

Publicado por Giovani Escudero (1 intervención) el 14/03/2016 16:02:03
Mira te explico lo que entiendo y la parte que pude hacer funcionar pero aun no logre que funcione todo al 100%

El escript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function(){                                  //Se declara la funcion.
    $( "#matricula" ).autocomplete({                          //$('#matricula') esta llamando el id del input y hacer auto complete CON LOS RESULTADOS DE LA BUSQUEDA
    	source: "buscaralumno.php",                          //Indica que el array se encuentra en el php buscar alumnos
    	minLength: 2                                                      //empezara a buscar a partir del segundo carácter escrito
    });
 
 
// REALMENTE DE AQUI EN ADELANTE NO PUDE HACER QUE FUNCIONARA
    $("#matricula").focusout(function(){                    // ESTA ES LA MATRICULA DESPUES EL AUTOCOMPLETE
    	$.ajax({                                                                 // llamada a ajax
      	    url:'alumno.php',                                            //Se buscaran los datos a acompletar en alumnos php
    	    type:'POST',                                                    //Se pasaran los datos por POST
    	    dataType:'json',                                              //Se pasaran los datos por de tipo JSON
    	    data:{ matricula:$('#matricula').val()}        //SE SUPONE ES EL VALOR DE LA MATRICULA QUE SE ESTA ENVIANDO
    	}).done(function(respuesta){                          //Cuando lo encuentra se imprime la respuesta
    	    $("#nombre").val(respuesta.nombre);     //Se imprime en el ID input nombre la respuesta de nombre
    	    $("#paterno").val(respuesta.paterno);     //Se imprime en el ID input paterno la respuesta de paterno
    	    $("#materno").val(respuesta.materno);   //Se imprime en el ID input materno la respuesta de materno
    	});
    });
});

El primer php.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$matricula = $_GET['term'];
                                                         //Esta matricula es la que toma del ID los valores del $('#matricula') del  autocomplete
 
$conexion = new mysqli('servidor','usuario','password','basedatos',3306);
                                                         //Coneccion a la BD mysql
 
$consulta = "SELECT matricula FROM tblalumno WHERE matricula LIKE '%$matricula%'";
                                                       //Genera el SELECT y busca el valor tomado por GET que ahora es matricula :S
 
$result = $conexion->query($consulta);
                                                      //Genera un query de los datos encontrados
 
 
if($result->num_rows > 0){                                          //Compara el result si no es cero
    while($fila = $result->fetch_array()){                     //realiza un while dando la fila del result en un array
        $matriculas[] = $fila['matricula'];                         //SE SUPONE QUE AL SER UN AUTO COMPLETADO TENDRIAS MAS DE UN RESULTADO POR EJEMPLO LA MATRICUALA COMIENSA POR 11 TODAS LAS QUE CONTENGAN 11 SE PONDRAN EN EL AUTO COMPLETADO PARA SELECCIONAR.
    }
echo json_encode($matriculas);                              //IMPRIME UNA LISTA DE MATRICULAS PARA SELECCIONAR RESULTADO DE LA BUSQUEDA
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Entiendo una parte

Publicado por OSVALDO (1 intervención) el 04/09/2017 03:13:45
lejos de lo que dices, ese código da error, no hace lo que pretende y no se si por construcción o librerías..
este el index completo.
alguna idea del por no funciona????

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   		<script src="https://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(){
				$( "#matricula" ).autocomplete({
      				source: "buscaralumno.php",
      				minLength: 2
    			});
 
    			$("#matricula").focusout(function(){
    				$.ajax({
    					url:'alumno.php',
    					type:'POST',
    					dataType:'json',
    					data:{ matricula:$('#matricula')}
    				}).done(function(respuesta){
    					$("#nombre").val(respuesta.nombre);
    					$("#paterno").val(respuesta.paterno);
    					$("#materno").val(respuesta.materno);
    				});
    			});
			});
        </script>
 
    </head>
    <body>
 
       	<form>
       		<label for="matricula">Matricula:</label>
	    	<input type="text" id="matricula" name="matricula" value=""/>
		    <label for="nombre">Nombre:</label>
		    <input type="text" id="nombre" name="nombre" value=""/>
		    <label for="paterno">Paterno:</label>
    		<input type="text" id="paterno" name="paterno" value=""/>
    		<label for="materno">Materno:</label>
	    	<input type="text" id="materno" name="materno" value=""/>
		</form>
    </body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar