Some time ago I have been looking for a solution to this problem, I have found many videotutorials and pages that report on the subject. But as much as I've tried, I can not find the solution to the problem.
The idea is that you can generate an autocomplete. When typing the character's document, the other fields are filled, so everything is fine.
Then when adding other fields that also have that same reaction. "This is where I do not succeed."
Here I put the code that I used.
<!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);
}
?>I know that this may be foolish in what is failing, but this may be due to my lack of programming knowledge.
I would appreciate if you could help me and explain to me, what is the error in order to continue expanding my little knowledge in this programming.
A thousand thanks.