I found an example which works perfectly to auto complete several input text from a query to mysql.
The example consisted of 5 input and I added a sixth. When doing the modification the sript was still working as in the beginning, it only added values to the 5 input and the one that I added extra did not complete it.
But this example also has a button to duplicate the form and in the duplicate if it loads the value of the "population" input, which is the one that was not included in the start example.
I would like to know why it does not load the value of the input population in the first query, but if when we add a second and a third form.
When I add a fourth form the scrip stops working completely and it does not do anything anymore.
I leave the files and the link to the demo of my site:
index.php
<!doctype html>
<html>
<head>
<title>How to autocomplete data on multiple fields with jQuery and AJAX</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<script type="text/javascript">
$(document).ready(function(){
$(document).on('keydown', '.username', function() {
var id = this.id;
var splitid = id.split('_');
var index = splitid[1];
$( '#'+id ).autocomplete({
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 id = response[0]['id'];
var name = response[0]['name'];
var email = response[0]['email'];
var age = response[0]['age'];
var salary = response[0]['salary'];
var poblacion = response[0]['poblacion'];
document.getElementById('name_'+index).value = name;
document.getElementById('age_'+index).value = age;
document.getElementById('email_'+index).value = email;
document.getElementById('salary_'+index).value = salary;
document.getElementById('poblacion_'+index).value = poblacion;
}
}
});
return false;
}
});
});
// Add more
$('#addmore').click(function(){
// Get last id
var lastname_id = $('.tr_input input[type=text]:nth-child(1)').last().attr('id');
var split_id = lastname_id.split('_');
// New index
var index = Number(split_id[1]) + 1;
// Create row with input elements
var html = "<tr class='tr_input'><td><input type='text' class='username' id='username_"+index+"' placeholder='Enter username'></td><td><input type='text' class='name' id='name_"+index+"' ></td><td><input type='text' class='age' id='age_"+index+"' ></td><td><input type='text' class='email' id='email_"+index+"' ></td><td><input type='text' class='salary' id='salary_"+index+"' ></td><td><input type='text' class='poblacion' id='poblacion_"+index+"' ></td></tr>";
// Append data
$('tbody').append(html);
});
});
</script>
</head>
<body>
<div class="container">
<table border='1' style='border-collapse: collapse;'>
<thead>
<tr>
<th>Username</th>
<th>Name</th>
<th>Age</th>
<th>Email</th>
<th>Salary</th>
<th>Poblacion</th>
</tr>
</thead>
<tbody>
<tr class='tr_input'>
<td><input type='text' class='username' id='username_1' placeholder='Enter username'></td>
<td><input type='text' class='name' id='name_1' ></td>
<td><input type='text' class='age' id='age_1' ></td>
<td><input type='text' class='email' id='email_1' ></td>
<td><input type='text' class='salary' id='salary_1' ></td>
<td><input type='text' class='poblacion' id='poblacion_1' ></td>
</tr>
</tbody>
</table>
<br>
<input type='button' value='Add more' id='addmore'>
</div>
</body>
</html>
getDetails.php
<?php
include "config.php";
$request = $_POST['request']; // request
// Get username list
if($request == 1){
$search = $_POST['search'];
$query = "SELECT * FROM users WHERE username like'%".$search."%'";
$result = mysqli_query($con,$query);
while($row = mysqli_fetch_array($result) ){
$response[] = array("value"=>$row['id'],"label"=>$row['username']);
}
// encoding array to json format
echo json_encode($response);
exit;
}
// Get details
if($request == 2){
$userid = $_POST['userid'];
$sql = "SELECT * FROM users WHERE id=".$userid;
$result = mysqli_query($con,$sql);
$users_arr = array();
while( $row = mysqli_fetch_array($result) ){
$userid = $row['id'];
$fullname = $row['fname']." ".$row['lname'];
$email = $row['email'];
$age = $row['age'];
$salary = $row['salary'];
$poblacion = $row['poblacion'];
$users_arr[] = array("id" => $userid, "name" => $fullname,"email" => $email, "age" =>$age, "salary" =>$salary, "poblacion" =>$poblacion);
}
// encoding array to json format
echo json_encode($users_arr);
exit;
}