I'm still trying to perfect my form with the auto-completion feature.
The code I have so far works through the keydown option and would need to start the query to mysql when the user of the focus to the imput text that is assigned to the query and not when you press. I have tried with the options "click" "focus" "ready", but only the dropdown with the keydown option appears.
$(document).on('keydown', '.nombreccli', function() {
Another problem I have is that the auto complete function looks for the imput text through its class. I'm using the bootstrap styles and having several text boxes with the autocomplete function I have to use the class tag of you as id and therefore I lose the css style.
$(document).on('keydown', '.nombreccli', function() {
Thank you very much,
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>