Lo que hace el código que pongo a continuación es lo siguiente
- En el campo nombre al ir ingresando los datos hace una consulta a la base de datos para mostrarme una lista desplegable de las coincidencias de nombres que se vayan encontrando.
- Al llenar los datos del campo nombre y quitar el foco si el nombre ya existe nos trae los datos correspondientes en dirección y teléfono.
- En caso que el nombre no este registrado nos deja estos campos vacíos.
tengo una base de datos que se llama
usuario y sus campos son nom_cliente, direccion, tel
Bueno enseguida pongo el formulario
formapp.php
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
include ("conexion.php");
?>
<script type="text/javascript" src="jquery/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript"> //consultar datos y autollenar campos
jQuery(document).ready(function(){
$('#nombre').autocomplete({source:'consul_autocompletar.php', minLength:1});
$('#nombre').focusout (function(){
var valor=$(this).val();
$.ajax ({
url:"consul_autocompletar2.php",
type:"POST",
dataType:"json",
data: {val:valor},
success: function(res){
$('#direccion').val(res.direccion)
$('#tel').val(res.tel)
}
})
})
});
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prueba autollenado</title>
</head>
<body>
<form name="form" method="post"><!-- manda los datos al frame -->
<fieldset style="border: 5px solid #000000;">
<legend>CLIENTE</legend>
<table>
<tr>
<td>NOMBRE</td>
<td><input type="text" name="nombre" id="nombre" style="text-transform:uppercase;" onKeyUp="javascript:this.value=this.value.toUpperCase();" size=80/></td>
</tr>
<tr>
<td>DIRECCION</td>
<td><input type="text" name="direccion" id="direccion" size=80/>
</td>
</tr>
<tr>
<td>TELEFONO</td>
<td><input type="text" name="tel" size=80 id="tel"/>
</td>
</tr>
</table>
</body>
</html>
consul_autocompletar.php (lista desplegable al ir escribiendo)
Código PHP:
<?php
if ( !isset($_REQUEST['term']) )
exit;
$dblink = mysql_connect('localhost', 'root', 'root') or die( mysql_error() );
mysql_select_db('usuario');
$rs = mysql_query('select distinct nom_cliente from usuario_t where nom_cliente like "'. mysql_real_escape_string($_REQUEST['term']) .'%" order by nom_cliente asc limit 0,10', $dblink);
$data = array();
if ( $rs && mysql_num_rows($rs) )
{
while( $row = mysql_fetch_array($rs, MYSQL_ASSOC) )
{
$data[] = array(
'label' => $row['nom_cliente'],
'value' => $row['nom_cliente']
);
}
}
echo json_encode($data);
//flush();
?>
consul_autocompletar2.php (llenar dirección y teléfono)
Código PHP:
<?php
if ( !isset($_POST['val']) )
exit;
$dblink = mysql_connect('localhost', 'root', 'root') or die( mysql_error() );
mysql_select_db('usuario');
$data = array();
$rs = mysql_query("select direccion, tel from usuario_t where nom_cliente='".$_POST['val']."';", $dblink);
$nombre_cliente=mysql_fetch_array($rs);
$data["direccion"]=$nombre_cliente["direccion"];
$data["tel"]=$nombre_cliente["tel"];
echo json_encode($data);
?>
conexion.php (archivo de coneccion a la base de datos)
Código PHP:
<?php
$host="localhost";
$user="root";
$pw="root";
$db="usuario";
$con=mysql_connect($host,$user,$pw)
or die ("problemas al conectar server");//conectar servidor
mysql_select_db($db,$con)
or die ("problema al conectar bd");//conectar base de datos
?>
Bueno ya solo se tienen que agregar las librerías que se marcan en el inicio del script en el archivo formapp.php
jquery-1.4.2.min.js
jquery-ui-1.8.2.custom.min.js
subiria el archivo completo pero no se como subir earchivos xD