Sigo intentando perfeccionar mi formulario con la función de auto completado.
El código que tengo hasta ahora funciona mediante la opción keydown y necesitaría que se iniciara la consulta a mysql cuando el usuario de el foco al imput text que tiene asignada la consulta y no cuando pulse. He probado con las opciones "click" "focus" "ready", pero solo aparece el desplegable con la opción keydown.
$(document).on('keydown', '.nombreccli', function() {
Otro problema que tengo es que la función de auto completar busca el imput text mediante su class. Estoy utilizando los estilos de bootstrap y al tener varias cajas de texto con la función de autocompletar tengo que usar la etiqueta class de estás como id y por lo tanto pierdo el estilo css.
$(document).on('keydown', '.nombreccli', function() {
Muchas gracias,
index.php
<html>
<head>
<title>Webslesson Demo - Dynamically Add or Remove input fields in PHP with JQuery</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href='jquery-ui.min.css' type='text/css' rel='stylesheet' >
<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<meta charset="utf-8">
<script type="text/javascript">
$(document).ready(function(){
$(document).on('keydown', '.nombrecli', function() {
var id = this.id;
var splitid = id.split('_');
var index = splitid[1];
$( '#'+id ).autocomplete({
minLength: 0, // <-- AQUI le indicamos que se despliegue sin esperar a que ingresen datos
source: function( request, response ) {
$.ajax({
url: "getDetails.php",
type: 'post',
dataType: "json",
data: {
search: request.term,request:1
},
success: function( data ) {
response( data );
}
});
},
select: function (event, ui) {
$(this).val(ui.item.label); // display the selected text
var userid = ui.item.value; // selected id to input
// AJAX
$.ajax({
url: 'getDetails.php',
type: 'post',
data: {userid:userid,request:2},
dataType: 'json',
success:function(response){
var len = response.length;
if(len > 0){
var idcli = response[0]['idcli'];
var namecli = response[0]['nombrecli'];
var telefonocli = response[0]['telefonocli'];
document.getElementById('nombrecli_'+index).value = namecli;
document.getElementById('telefonocli_'+index).value = telefonocli;
}
}
});
return false;
}
});
});
});
</script>
</head>
<body>
<div class="container">
<br />
<br />
<h2 align="center"><a href="http://www.webslesson.info/2016/02/dynamically-add-remove-input-fields-in-php-with-jquery-ajax.html" title="Dynamically Add or Remove input fields in PHP with JQuery">Dynamically Add or Remove input fields in PHP with JQuery</a></h2><br />
<div class="form-group">
<form name="add_name" id="add_name">
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_fieldcli">
<td colspan="3" align="center" style="color:#FFFFFF" bgcolor="#00CCFF"><b>DATOS DEL CLIENTE</b></td>
<tr>
<td>CLIENTE: <input type="text" name="nombrecli_1" placeholder="Enter your Name" id='nombrecli_1' size="25" class="nombrecli" class="form-control name_list1" /></td>
<td>REF. CLIENTE:<input type="text" name="referencia_cliente" placeholder="Introduce la referencía de facturación" id='referencia_cliente' size="40" class="form-control name_list"" /></td>
<td>Orden:<input type="file" name="ordendecarga" placeholder="Sube la orden de carga" id='ordendecarga' size="10" class="form-control name_list"" /></td>
</tr>
</table>
</div>
</form>
</div>
</body>
</html>
<script>
$(document).ready(function(){
var i=1;
$('#addcon').click(function(){
i++;
$('#dynamic_fieldcon').append('<tr id="row'+i+'"><td>CONTACTO '+i+':<input type="text" name="nombrecon'+i+'" id="nombrecon'+i+'" placeholder="Enter your Name" class="nombrecon'+i+'" size="25" class="form-control name_list" /></td><td><input type="text" name="telefonocon'+i+'" id="telefonocon'+i+'" placeholder="Enter your Name" class="form-control name_list" /></td><td><input type="text" name="mailcon'+i+'" id="mailcon'+i+'" placeholder="Enter your Name" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
i--;
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
});
$('#submit').click(function(){
$.ajax({
url:"adddataviajes.php",
method:"POST",
data:$('#add_name').serialize(),
success:function(data)
{
alert(data);
$('#add_name')[0].reset();
}
});
});
});
</script>