1

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."

Pantallazo de lo que se lleva.. falta lograr que el autocompletado tambien llegue a los nuevos campos adicionados

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.

0

3 respuestas 3

0

Podría ser que tienes que tener un id único para que pueda reconocer jquery al hacer tu insertar dinámico. Prueba algo similar a esto y me cuentas como te va.

[ACTUALIZADO]

<!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="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>   
    <script type="text/javascript">  
        $(function() {
            var availableTags = [
            {
              value:"Andres Miguel",
              documento: "documento1",
              nombres: "nombres1",
              cargo: "cargo1",
              grado: "grado1",
              telefono: "telefono1",
              email: "email1"
            },
            {
              value:"Campos Morales",
              documento: "documento2",
              nombres: "nombres2",
              cargo: "cargo2",
              grado: "grado2",
              telefono: "telefono2",
              email: "email2"
            },
            {
              value:"Miguel Campos",
              documento: "documento3",
              nombres: "nombres3",
              cargo: "cargo3",
              grado: "grado3",
              telefono: "telefono3",
              email: "email3"
            }
          ];

        $(document).ready(function(){

             var maxGroup = 3;
             var id = 0;
            $(".addMore").click(function(){
                id = id + 1;
                if($('body').find('.form-group').length <= maxGroup){
                    var fieldHTML = '<div class="form-group fieldGroup selector-' + id + '">'+$(".fieldGroupCopy").html()+'</div>';
                    $('body').find('.fieldGroupCopy:last').before(fieldHTML);
                }else{
                    alert('Maximo '+maxGroup+' personas, mayor a esto realize cargue masivo.');
                }

                $(".selector-" + id + " #documento").autocomplete({
                        source: availableTags,
                        minLength: 2,
                        select: function(event, ui) {
                        event.preventDefault();
                        $('.selector-' + id + ' #documento').val(ui.item.documento);
                        $('.selector-' + id + ' #nombres').val(ui.item.nombres);
                        $('.selector-' + id + ' #cargo').val(ui.item.cargo);
                        $('.selector-' + id + ' #grado').val(ui.item.grado);
                        $('.selector-' + id + ' #telefono').val(ui.item.telefono);
                        $('.selector-' + id + ' #email').val(ui.item.email);
                        }
                    });
                });
            });
            //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>      
        </form>
    </div>
</section>  
</body>
</html>
6
  • Hola, mil gracias por interesarte en el tema.. te cuento.. es correcta tu apreciacion.. se debe tener el mismo ID para los elementos al hacer la creacion o adicion de campos dinamicos..
    – nitramara
    Commented el 2 jul. 2018 a las 7:45
  • Hola, mil gracias por interesarte en el tema.. te cuento.. es correcta tu apreciacion.. se debe tener el mismo ID para los elementos al hacer la creacion o adicion de campos dinamicos.. debido a que la idea es posteriormente insertarlos en la DB, Te comento que implemente lo que me indicas pero no funciona.. con tus aportes no me muestra ya nada de la informacion que me traia de la DB... te agradeceria.. me puedas indicar que puede estar pasando. Mil Gracias
    – nitramara
    Commented el 2 jul. 2018 a las 7:54
  • Se selecciono las clases con selector-id diferente. Aun creo que debes optar por asignar un id a tus etiquetas o un name único a las mismas para poder diferenciarlas de las demás y así jquery puede nuevamente asiganar el autocomple. Espero que este la idea por lo que deseas hacer. Puedes consultar la api de jquery api.jqueryui.com/autocomplete Commented el 2 jul. 2018 a las 20:43
  • Es correcto.. eso seria lo logico.. pero como puedes observar tengo un boton que al recibir accion (Click) me duplica o clona los input.. para que esto suceda y poder despues tomar su valor tengo que recogerlos y enviarlos como array.. no se como podria hacerle un tipo de mascara a los id para seguir tomando esos datos..
    – nitramara
    Commented el 2 jul. 2018 a las 23:42
  • Prueba npmjs.com/package/jquery-serializejson o algo similar. Suerte Commented el 3 jul. 2018 a las 13:39
0

Sucede lo mismo que con el click del remove, tenes que delegar el evento de autocomplete (a un elemento padre o al body o al document) para que se asigne a los nuevos campos, ademas de proporcionar un id único para cada nuevo campo agregado, ó manejarlo por classes.

En este ejemplo limpié un poco el html, definí un diccionario local (un array) y asigno el evento keydown.autocomplete a los input con clase autocompletar.

$(function() {
   var autoOpciones = {
   source: ["pera", "manzana", "árbol", "semáforo"],
   minLength: 2,
   };
   var autoSelector = "INPUT.autocompletar";
   
   $(document).on('keydown.autocomplete', autoSelector, function() {
    $(this).autocomplete(autoOpciones);
   });

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;
			}		
<!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>
</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[]"  placeholder="Digite Documento"/>
				<input style="text-align:center" size="40" type="text" id="nombres" name="nombres[]"  placeholder="Nombres" class="autocompletar"/>
				<input style="text-align:center" size="25" type="text" id="cargo" name="cargo[]"  placeholder="Cargo" class="autocompletar"/>
				<input style="text-align:center" size="15" type="text" id="grado" name="grado[]"  placeholder="Grado" class="autocompletar"/>
				<input style="text-align:center" size="12" type="text" id="telefono" name="telefono[]" placeholder="Telefono Contacto" class="autocompletar"/>
				<input style="text-align:center" size="33" type="text" id="email" name="email[]"  placeholder="Email" class="autocompletar"/>
				<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" class="autocompletar"/>
				<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>

1
  • Hola mil gracias, por el interés, te comento, no me funciona de este modo, de hecho.. ya no me realiza la llamada a los datos de la DB ni en la primera fila, sobra decir que le he cambiado el array que habias creado por el path al archivo php que me realiza la busqueda,. otra cosa.. la verdad no entiendo bien lo de los eventos.. ya habia comentado.. esto puede deberse a que tengo serias limitaciones en el conocimiento de este tema..ya que soy novato.. por eso te pediría por favor me indiques que procedimiento haces y para que sirve o una referencia para poder documentarme mejor..Mil Gracias
    – nitramara
    Commented el 2 jul. 2018 a las 23:38
0

Prefiero este método.

Elimina esta función del input

onkeypress="return runScript(event)

En su lugar agrega al input documento una clase css con el nombre auto

<input style="text-align:center" size="15" type="text" class="auto" id="documento" name="documento[]"  placeholder="Digite Documento"/>

y agrega el siguiente código Jquery

$(document).on("keyup",".auto",function(){
    $(this).autocomplete({
        source: "productos.php",
        minLength: 2,
        select: function(event, ui) {
            event.preventDefault();
            $(this).val(ui.item.documento);
            $(this).parent().find("input[name='nombres[]']").val(ui.item.nombres)
            $(this).parent().find("input[name='cargo[]']").val(ui.item.cargo)
            $(this).parent().find("input[name='grado[]']").val(ui.item.grado)
            $(this).parent().find("input[name='telefono[]']").val(ui.item.telefono)
            $(this).parent().find("input[name='email[]']").val(ui.item.email)
        }       
     });
})

Con este código detectaremos dinámicamente si se ha presionado una tecla sobre un input con la clase css .auto.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.