Tengo un ejemplo funcionando de auto completado, al introducir un dígito en el imput text "nombrecli_1" se inicia una búsqueda en la base de datos el la columna "nombrecli" y muestra un desplegable con las coincidencias. Una vez seleccionas una de las opciones se auto completan otros imput text tomando como referencia el id. He intentado modificar el ejemplo para que muestre el desplegable sin tener que pulsar ningún dígito, en el formulario final el usuario puede no tener ni idea que de los resgistros de la columna clientes.
Al no poder modificar el ejemplo he intentado substituir el imput text por un select con la librería select2. Esta librería me ha permitido conectar con la base de datos y mostrar mediante desplegable todos los resultados de la columna sin tener que introducir ningún dígito.
Pensaba que ya había encontrado la solución, pero no soy capaz de hacer converger los dos ejemplos. Cuando selecciono la opción en el desplegable del select (id = nombrecli_1) no se me auto completa el imput text (id = telefonocli_1)
Realmente necesitaría poder modificar la opción con el imput text ya querría que el usuario pudiera introducir valores que no estén en la database y se crearan al enviar el form, pero esto puedo trampear lo haciendo otro form para la creación de nuevos registros.
Os agradecería si pudierais revisar el código.
Muchas gracias
Index.html ( he dejado las dos opciones (imput text y select)
<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">
<!-- select2 css -->
<link href='select2/dist/css/select2.min.css' rel='stylesheet' type='text/css'>
<!-- select2 script -->
<script src='select2/dist/js/select2.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).on('keypress', '.nombrecli', 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 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">
<tr>
<td>CLIENTE: <input type="text" name="nombrecli_1" placeholder="Enter your Name" id='nombrecli_1' class="nombrecli" class="form-control name_list" /></td> //
<td>CLIENTE: <select name="nombrecli_1" placeholder="Enter your Name" id='nombrecli_1' class="nombrecli" class="form-control name_list" style='width: 200px;'>
<option value='0'>- Search user -</option>
</select></td>
<td>TELEFONO: <input type="text" name="telefonocli[]" placeholder="Enter your Name" id='telefonocli_1' class="telefonocli" /></td>
<td><button type="button" name="add" id="addcli" class="btn btn-success">Add More</button></td>
</tr>
</table>
</div>
</form>
</div>
</body>
</html>
<script>
$(document).ready(function(){
var i=1;
$('#addcli').click(function(){
i++;
$('#dynamic_fieldcli').append('<tr id="row'+i+'"><td><input type="text" name="nombrecli_'+i+'" id="nombrecli_'+i+'" placeholder="Enter your Name" class="nombrecli" /></td><td><input type="text" name="telefonocli[]" id="telefonocli_'+i+'" placeholder="Enter your Name" class="telefonocli" /></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();
});
});
$(document).ready(function(){
$("#nombrecli_1").select2({
ajax: {
url: "getData.php",
type: "post",
dataType: 'json',
delay: 250,
data: function (params) {
return {
searchTerm: params.term // search term
};
},
processResults: function (response) {
return {
results: response
};
},
cache: true
}
});
});
</script>
getdetails.php
<?php
include "config.php";
$request = $_POST['request']; // request
// Get username list
if($request == 1){
$search = $_POST['search'];
$query = "SELECT * FROM clientes WHERE nombrecli like'%".$search."%'";
$result = mysqli_query($con,$query);
while($row = mysqli_fetch_array($result) ){
$response[] = array("value"=>$row['idcli'],"label"=>$row['nombrecli']);
}
// encoding array to json format
echo json_encode($response);
exit;
}
// Get details
if($request == 2){
$userid = $_POST['userid'];
$sql = "SELECT * FROM clientes WHERE idcli=".$userid;
$result = mysqli_query($con,$sql);
$users_arr = array();
while( $row = mysqli_fetch_array($result) ){
$userid = $row['idcli'];
$nombrecli = $row['nombrecli'];
$telefonocli = $row['telefonocli'];
$users_arr[] = array("idcli" => $userid, "nombrecli" => $nombrecli, "telefonocli" => $telefonocli);
}
// encoding array to json format
echo json_encode($users_arr);
exit;
}
getdata.php
<?php
include 'config.php';
if(!isset($_POST['searchTerm'])){
$fetchData = mysqli_query($con,"select * from clientes order by nombrecli limit 5");
}else{
$search = $_POST['searchTerm'];
$fetchData = mysqli_query($con,"select * from clientes where nombrecli like '%".$search."%' limit 5");
}
$data = array();
while ($row = mysqli_fetch_array($fetchData)) {
$data[] = array("id"=>$row['idcli'], "text"=>$row['nombrecli']);
}
echo json_encode($data);