求助：jQuery Autocomplete选择后仅填充当前行Item Number的实现问题

问题现象 #

动态增删行的库存表单中，每行包含Item Description、Item Number和Quantity输入框：

• 第一行的Item Description选择Autocomplete建议后，能正常填充当前行的Item Number
• 新增行选择Autocomplete建议时，会修改所有行的Item Number值

问题根源 #

1. 全局选择器导致批量修改：原代码中$('input[name="item_number[]"]').val(ui.item.id)会选中所有name为item_number[]的输入框，而非当前触发Autocomplete的行对应的输入框
2. 重复绑定Autocomplete事件：在add按钮点击和keyup/change事件中重复给所有item_description[]输入框绑定Autocomplete，导致事件叠加

解决方案 #

修正后的JS代码 #

// 初始化第一行的Autocomplete
initAutocomplete($('input[name="item_description[]"]').first());

// 添加新行按钮事件
$("#add").click(function(){
    // 找到刚新增的行里的item_description输入框（需确保新增行逻辑已完成DOM插入）
    const newDescInput = $('input[name="item_description[]"]').last();
    // 只为新行绑定Autocomplete
    initAutocomplete(newDescInput);
});

// 统一的Autocomplete初始化函数
function initAutocomplete($input){
    $input.autocomplete({
        source: 'fetchData.php',
        select: function( event, ui ) {
            event.preventDefault();
            // 设置当前输入框的联想文本值
            $(this).val(ui.item.value);
            // 定位当前行的item_number输入框并赋值
            $(this).closest('tr').find('input[name="item_number[]"]').val(ui.item.id);
        }
    });
}

// 正则检查逻辑（保留原有需求：任意行匹配则显示numdiv）
$('body').on('keyup change', 'input[name="item_description[]"]', function() {
    let matches = false;
    const regx = /(one|five|eight)/gmi;
    
    $('input[name="item_description[]"]').each(function() {
        if ($(this).val().match(regx)){  
            matches = true;
            return false; // 找到匹配后提前退出循环，提升效率
        }
    });

    if (matches){  
        $("#numdiv, #lblnumdiv").show();
    } else {
        $("#numdiv, #lblnumdiv").hide();
    }
}); 

PHP代码修正（连接变量名+安全优化） #

原代码存在变量名不一致导致的连接失败风险，同时添加SQL注入防护：

<?php 
// Database configuration 
$dbhost = 'localhost';
$dbuser = 'yyyyy';
$dbpass = 'yyyyy';
$dbname = 'yyyyy';
 
$db = new mysqli($dbhost, $dbuser, $dbpass, $dbname); 
 
if ($db->connect_error) { 
    die("Connection failed: " . $db->connect_error); 
} 
 
// 使用预处理语句防止SQL注入
$searchTerm = $_GET['term']; 
$stmt = $db->prepare("SELECT * FROM tbl_inventory WHERE inv_name LIKE ? ORDER BY inv_name ASC");
$likeTerm = "%".$searchTerm."%";
$stmt->bind_param("s", $likeTerm);
$stmt->execute();
$result = $stmt->get_result();
 
$invData = array(); 
if($result->num_rows > 0){ 
    while($row = $result->fetch_assoc()){ 
        $data['id'] = $row['inv_id']; 
        $data['value'] = $row['inv_name']; 
        array_push($invData, $data); 
    } 
} 
 
echo json_encode($invData); 
$stmt->close();
$db->close();
?>

关键修改说明 #

• 行内精准定位：用$(this).closest('tr')找到当前输入框所在的表格行，再通过find定位该行的item_number输入框，确保只修改当前行的值
• 避免重复绑定事件：封装initAutocomplete函数，仅给初始化的第一行和新增的行单独绑定Autocomplete，防止事件叠加导致的异常
• SQL注入防护：PHP部分改用预处理语句替代直接拼接SQL，避免安全风险
• 提升正则检查效率：找到匹配项后立即退出循环，减少不必要的遍历操作

内容的提问来源于stack exchange，提问作者Chris