我很努力地在JQuery中制作带有动态字段和自动完成功能的PHP表单，到目前为止，我可以添加新字段，并且自动完成功能可以正常工作，但是仅对于第一个字段，我使它可以与其他教程一起使用，但是现在我被困住了，我知道我没有使用最佳实践，或者代码没有最佳结构，但是到目前为止，它仍然有效，希望您能对我有所帮助，在此先感谢您的回答
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<?php
require 'includes/db.php';
$querysup = "SELECT * FROM Suppliers";
$result1 = mysqli_query($conn, $querysup);
$select = "";
while($row1 = mysqli_fetch_array($result1)) {
$supplierid = $row1['Id_Supplier'];
$suppliername = $row1['Name'];
$select = $select.'<option value="'.$row1[0].'">'.$row1[3].'</option>';
}
?>
<div class="container">
<div class="form-group">
<form name="add_name" id="add_name">
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td><input type="text" name="product[]" id='autocomplete' class="form-control name_list"/><input type='hidden' id='selectuser_id' name="productId[]"/></td>
<td><select class="form-control custom-select" name="supplier[]"><?php echo $select;?></select></td>
<td><input type="number" name="quantity[]" id="quantity" placeholder="0000000" class="form-control name_list"></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add Fields</button></td>
</tr>
</table>
<input type="button" name="submit" id="submit" class="btn btn-info" value="submit" />
</div>
</form>
</div>
</div>
<script>
$(document).ready(function(){
$( function() {
// Single Select
$( "#autocomplete" ).autocomplete({
source: function( request, response ) {
// Fetch data
$.ajax({
url: "fetch.php",
type: 'post',
dataType: "json",
data: {
search: request.term
},
success: function( data ) {
response( data );
}
});
},
select: function (event, ui) {
// Set selection
$('#autocomplete').val(ui.item.label); // display the selected text
$('#selectuser_id').val(ui.item.value); // save selected id to input
return false;
}
});
});
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="product[]" id="autocomplete"/><input type="hidden" id="selectuser_id" name="productId[]"/></td><td><select name="supplier[]"><?php echo $select;?></select></td><td><input type="number" name="quantity[]" id="quantity"></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(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$('#submit').click(function(){
$.ajax({
url:"cotprod.php",
method:"POST",
data:$('#add_name').serialize(),
success:function(data)
{
alert(data);
$('#add_name')[0].reset();
}
});
});
});
</script>
</body>
</html>
<script>
$( function() {
// Single Select
$( "#autocomplete" ).autocomplete({
source: function( request, response ) {
// Fetch data
$.ajax({
url: "fetch.php",
type: 'post',
dataType: "json",
data: {
search: request.term
},
success: function( data ) {
response( data );
}
});
},
select: function (event, ui) {
// Set selection
$('#autocomplete').val(ui.item.label); // display the selected text
$('#selectuser_id').val(ui.item.value); // save selected id to input
return false;
}
});
});
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
</script>
Fetch.php
<?php
include "includes/db.php";
if(isset($_POST['search'])){
$search = $_POST['search'];
$query = "SELECT * FROM Productos_MC WHERE Clave like'%".$search."%'";
$result = mysqli_query($conn,$query);
$response = array();
while($row = mysqli_fetch_array($result) ){
$response[] = array("value"=>$row['Id_Producto'],"label"=>$row['Clave']);
}
echo json_encode($response);
}
exit;
?>
cotprod.php
<?php
require 'db.php';
$query3 = mysqli_query($conn,"SELECT Id_Cot FROM Cot ORDER BY Id_Cot DESC LIMIT 1;");
$cotrow = mysqli_fetch_array($query3);
$cotId = $cotrow['Id_Cot'];
$number = count($_POST["product"]);
if($number > 0)
{
for($i=0; $i<$number; $i++)
{
if(trim($_POST["product"][$i] != ''))
{
$supplier = $_POST["supplier"][$i];
$quantity = $_POST["quantity"][$i];
$productId = $_POST["productId"][$i];
echo "proovedor: ".$supplier;
echo "cantidad: ".$quantity;
$sql = "INSERT INTO Cot_Prod(
`Cot_Id`,
`Product_Id`,
`Code`,
`Supplier_Id`,
`Quantity`
) VALUES(
'".$cotId."',
'".$productId."',
'".mysqli_real_escape_string($conn, $_POST["product"][$i])."',
'".$supplier."',
'".$quantity."'
)";
mysqli_query($conn, $sql);
}
}
echo "Data Inserted";
}
else
{
echo "Please Enter Name";
}
?>