Hace tiempo he estado buscando una solución a este inconveniente, he encontrado muchos videotutoriales y páginas que informan sobre el tema. Pero por más que lo he intentado no logro encontrar la solución del problema.
La idea es que se pueda generar un autocompletado. Al digitar el documento del personaje se llenan los otros campos, hasta aquí todo bien.
Luego al agregar otros campos que también tenga esa misma reacción. "Aqui es donde no lo logro."
Aquí coloco el código que he utilizado.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>solo prueba autocompletar</title>
<link href="css/estilos.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$("#documento").autocomplete({
source: "productos.php",
minLength: 2,
select: function(event, ui) {
event.preventDefault();
$('#documento').val(ui.item.documento);
$('#nombres').val(ui.item.nombres);
$('#cargo').val(ui.item.cargo);
$('#grado').val(ui.item.grado);
$('#telefono').val(ui.item.telefono);
$('#email').val(ui.item.email);
}
});
});
$(document).ready(function(){
var maxGroup = 3;
$(".addMore").click(function(){
if($('body').find('.fieldGroup').length < maxGroup){
var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
$('body').find('.fieldGroup:last').after(fieldHTML);
}else{
alert('Maximo '+maxGroup+' personas, mayor a esto realize cargue masivo.');
}
});
//remover
$("body").on("click",".remove",function(){
$(this).parents(".fieldGroup").remove();
});
});
function onEnviar(){
document.getElementById("variable").value=newElem;
}
</script>
</head>
<body>
<section class="main">
<header class="header"><h1>Generar ingreso de personal</h1></header>
<h1 align="center">Ingresar personal </h1>
<div class="div_form">
<form id="myForm">
<div class="form-group fieldGroup">
<strong><span> <b> Relación de personal</b> </span></strong>
<div class="input-group">
<input style="text-align:center" size="15" type="text" id="documento" name="documento[]" onkeypress="return runScript(event)" placeholder="Digite Documento"/>
<input style="text-align:center" size="40" type="text" id="nombres" name="nombres[]" placeholder="Nombres"/>
<input style="text-align:center" size="25" type="text" id="cargo" name="cargo[]" placeholder="Cargo"/>
<input style="text-align:center" size="15" type="text" id="grado" name="grado[]" placeholder="Grado"/>
<input style="text-align:center" size="12" type="text" id="telefono" name="telefono[]" placeholder="Telefono Contacto"/>
<input style="text-align:center" size="33" type="text" id="email" name="email[]" placeholder="Email"/>
<div class="input-group-addon">
<a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span>Adiciona</a>
</div>
</div>
</div>
<!---
--->
<div class="form-group fieldGroupCopy" style="display: none;">
<div class="input-group">
<input style="text-align:center" size="15" type="text" id="documento" name="documento[]" onkeypress="return runScript(event)" placeholder="Digite Documento"/>
<input style="text-align:center" size="40" type="text" id="nombres" name="nombres[]" placeholder="Nombres"/>
<input style="text-align:center" size="25" type="text" id="cargo" name="cargo[]" placeholder="Cargo"/>
<input style="text-align:center" size="15" type="text" id="grado" name="grado[]" placeholder="Grado"/>
<input style="text-align:center" size="12" type="text" id="telefono" name="telefono[]" placeholder="Telefono Contacto"/>
<input style="text-align:center" size="33" type="text" id="email" name="email[]" placeholder="Email"/>
<div class="input-group-addon">
<a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span>Eliminar</a>
</div>
</div>
</div>
<div id="caja1" style="margin-bottom:4px;">
<fieldset>
<strong><span>Procesar </span></strong>
<input type="submit" name="submit" class="btn btn-primary" value="Procesar"/>
</fieldset>
</div>
</section>
</form>
</div>
</body>
</html>
<?php
if (isset($_GET['term'])){
$con=@mysqli_connect("localhost", "root", "12345", "base");
$return_arr = array();
/* Si la conexión a la base de datos , ejecuta instrucción SQL. */
if ($con)
{
$fetch = mysqli_query($con,"SELECT * FROM info_personal where COD_EMPLEADO like '%" . mysqli_real_escape_string($con,($_GET['term'])) . "%' LIMIT 0 ,50");
/* Recuperar y almacenar en conjunto los resultados de la consulta.*/
while ($row = mysqli_fetch_array($fetch)) {
$row_array['value'] = $row['COD_EMPLEADO']." | ".$row['EMPLEADO'];
$row_array['documento']=$row['COD_EMPLEADO'];
$row_array['nombres']=$row['EMPLEADO'];
$row_array['area']=$row['ESQUEMA'];
$row_array['codigo_cargo']=$row['CODCARGOEMPRESA'];
$row_array['cargo']=$row['CARGO_EMPRESA'];
$row_array['grado']=$row['GRADO'];
$row_array['basico']=$row['BASICO'];
$row_array['origen']=$row['ORIGEN'];
$row_array['telefono']=$row['TELEFONO'];
$row_array['direccion']=$row['DIRECCION'];
$row_array['email']=$row['EMAIL'];
array_push($return_arr,$row_array);
}
}
/* Cierra la conexión. */
mysqli_close($con);
/* Codifica el resultado del array en JSON. */
echo json_encode($return_arr);
}
?>
Se que puede ser una tontada esto en lo que este fallando, pero esto se puede deber a mi falta de conocimientos de programación.
Agradecería que me ayudaran y me explicaran, cual es el error a fin de poder seguir ampliando mis pocos conocimientos en esto de la programación.
Mil gracias.