Estoy utilizando jquery-ui para hacer el autocompletar de un input y al escoger el dato me cargue otros datos en otros input, hasta ahí todo bien.
El problema es el siguiente:
Cuando coloco el código del formulario fuera del modal funciona correctamente, pero al colocar el código dentro de la ventana modal ya no me funciona; es decir no auto-completa y por consiguiente no se pueden cargar los datos de los input.
A continuación el código que coloco fuera de la ventana modal.
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input id="document" class="form-control" type="text">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input id="nombr" class="form-control" readonly>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input id="apellid" class="form-control" readonly>
</div>
</div>
</div>
A continuación el código dentro de la venta modal.
<div class="modal" id="nuevoUsu" tabindex="-1" role="dialog" aria-labellebdy="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>Nueva Apuesta</h4>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div class="modal-body">
<form action="registrar.php" method="GET" name="myform" id="myform">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input id="document" class="form-control" type="text">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input id="nombr" class="form-control" readonly>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input id="apellid" class="form-control" readonly>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-success" value="Registrar">
<button type="button" class="btn btn-danger" data-dismiss="modal"><span class='glyphicon glyphicon-remove'></span> Cancelar</button>
</form>
</div>
</div>
</div>
</div>
Estoy utilizando estas librerías
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>-->
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery-ui.js"></script>
Script para donde llamo el archivo donde cargo los datos
<script type="text/javascript">
$(function() {
$("#document").autocomplete({
source: "jugadores.php",
minLength: 2,
select: function(event, ui) {
event.preventDefault();
$('#document').val(ui.item.codigo);
$('#document').val(ui.item.document);
$('#nombr').val(ui.item.nombr);
$('#apellid').val(ui.item.apellid);
$('#id_jugador').val(ui.item.id_jugador);
}
});
});
</script>
Archivo donde cargo el arreglo con los datos solicitados
<?php
if (isset($_GET['term'])){
# conectare la base de datos
$con=@mysqli_connect("localhost", "root", "root", "contabilidad");
$return_arr = array();
/* Si la conexión a la base de datos , ejecuta instrucción SQL. */
if ($con)
{
$fetch = mysqli_query($con,"SELECT * FROM jugador where documento 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)) {
$id_jugador=$row['id_jugador'];
$row_array['value'] = $row['documento']." | ".$row['nombres']." ".$row['apellidos'];
$row_array['id_jugador']=$row['id_jugador'];
$row_array['document']=$row['documento'];
$row_array['nombr']=$row['nombres'];
$row_array['apellid']=$row['apellidos'];
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);
}
?>