autocompletar campos formulario

maurohertlein · #1 (**permalink**) 13/03/2013, 13:32

Buenas tardes
Tengo un formulario con 3 input Nombre, direccion y documento.
En el input Nombre hice un autocompletar con jquery que me va completando a medida que escribo.
Lo que yo necesito es que cuando elija una de las opciones que me da el autocompletado del Nombre se completen automaticamente la direccion y el documento que ya estan guardadas en una base de datos. No se como hacerlo, desde ya muchas gracias

Triby · #2 (**permalink**) 13/03/2013, 14:12

En la línea 485 de tu javascript agrega la opción para cargar también esos datos.

P.D. No crees que sería bueno que veamos el código involucrado en el problema?

Reedyseth · #3 (**permalink**) 13/03/2013, 19:39

Es un foro de ayuda, pero cual es tu pregunta ? como hacerlo ? Basada en la selccion que tienes del autocomplete disparas una funcion que haga el query de la direccion con Ajax y despues llenas los campos, esa es la respuesta, como lo implementas es una tarea que tienes que hacer.

loncho_rojas · #4 (**permalink**) 13/03/2013, 19:48

lee algo de esto

https://www.google.com.py/search?q=c...hrome&ie=UTF-8

maurohertlein · #5 (**permalink**) 14/03/2013, 09:13

gracias por la respuesta y pedon por no poner el codigo. Ahora he logrado hacerlo pero con select. Necesitaria hacerlo con input y que ese input se autocomplete
Pongo el codigo
ajax.php

<?php
include('conec.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></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script >
//funcion que limpia los demas campos
function LimpiarInput(destino,destino2)
{
destino.value="";
}
//funcion que llena los datos
function LlenarDatos(text,destino,destino2,destino3,destino 4,destino5)
{
var datos = text.split('|'); //dividimos los datos para colocarlos en el lugar correcto
destino.value = datos[0];
destino2.value = datos[1];
destino3.value = datos[2];
destino4.value = datos[3];
destino5.value = datos[4];
}
//fucion con la cual obtenemos los datos
function obten_datos(arrastre,destino,destino2,destino3,des tino4,destino5)
{
//alert("arrastre: "+arrastre+" destino: "+destino+" destino2: "+destino2+" destino3: "+destino3+" destino4: "+destino4+" destino5: "+destino5);
destino = document.getElementById(destino);
destino2 = document.getElementById(destino2);
destino3 = document.getElementById(destino3);
destino4 = document.getElementById(destino4);
destino5 = document.getElementById(destino5);
LimpiarInput(destino);
LimpiarInput(destino2);
LimpiarInput(destino3);
LimpiarInput(destino4);
LimpiarInput(destino5);
if(arrastre.options[arrastre.input].value != 0)
{
arrastre.disabled = true;
destino.disabled = true;
destino.value = 'Cargando Nombre....';
destino2.disabled = true;
destino2.value = 'Cargando Serie ....';
destino3.disabled = true;
destino3.value = 'Cargando Marca ....';
destino4.disabled = true;
destino4.value = 'Cargando Idtpm ....';
destino5.disabled = true;
destino5.value = 'Cargando Curso ....';
$.ajax({
type: 'get',
dataType: 'text',
url: 'obtendatos.php',
data: {valor: arrastre.options[arrastre.input].value},
success: function(text){
LlenarDatos(text,destino,destino2,destino3,destino 4,destino5);
arrastre.disabled = false;
destino.disabled = false;
destino.readOnly = true;
destino2.disabled = false;
destino2.readOnly = true;
destino3.disabled = false;
destino3.readOnly = true;
destino4.disabled = false;
destino4.readOnly = true;
destino5.disabled = false;
destino5.readOnly = true;
}
});
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="27%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="38%">Trabajador    </td>
<td width="62%"><label>
<select name="name" id="name" onchange="javascipt:obten_datos(this,'nombre','ser ie','marca','idtpm','curso');">
<option value="0">elige</option>
<?php
// creamos las opciones del select
$sql = new conectarMySQL("localhost", "root", "123456", "prueba");
$sql->conectar();
$sql->consultar("SELECT nombre FROM estado_netbooks");
while ($row = $sql->obtendatos()){
?>
<option value="<?php echo $row['nombre']; ?>"> <?php echo $row['nombre'];?></option>
<?php
}
$sql->cerrarconexion();
$sql->limpiaconsulta();
?>
</select>
</label></td>
</tr>
</table> <br />
<table>
<tr>
<td>Nombre </td>
<td>Apellido Paterno</td>
<td>Apellido Materno</td>
<td>Puesto </td>
<td>Rfc </td>
<td>Persepciones </td>
<td>Deducciones </td>
<td>Total </td>
<td>Firma </td>
</tr>
<tr> <td height="28"><label><input type="text" name="nombre" id="nombre" /> </label></td>
<td><label><input type="text" name="serie" id="serie" /> </label></td>
<td><label><input type="text" name="marca" id="marca" /> </label></td>
<td><label><input type="text" name="idtpm" id="idtpm" /> </label></td>
<td><label><input type="text" name="curso" id="curso" /> </label></td>
<td><label><input type="text" name="persepcion" id="persepcion"/> </label></td>
<td><label><input type="text" name="deduccion" id="deduccion" /> </label></td>
<td><label><input type="text" name="total" id="total" /> </label></td>
<td><label> ____________________ </label></td>
</tr>
</table>
</form>
<br />
</body>
</html>


obtendatos.php
<?php
include('conec.php');
$valor = $_GET['valor'];
$sql2 = new conectarMySQL("localhost", "root", "123456", "prueba");
$sql2->conectar();
$sql2->consultar("SELECT nombre, serie, marca, idtpm, curso FROM estado_netbooks WHERE nombre = '$valor' ");
$row = $sql2->obtendatos();
echo $row['nombre'].'|'.$row['serie'].'|'.$row['marca'].'|'.$row['idtpm'].'|'.$row['curso'];
sleep(1);
return $dat = $row['nombre'].'|'.$row['serie'].'|'.$row['marca'].'|'.$row['idtpm'].'|'.$row['curso'];
$sql2->cerrarconexion();
$sql2->limpiaconsulta();
?>