如何在jQuery Autocomplete插件列表中附带数据库的隐藏product_id

要实现自动补全时携带product_id，需同时修改后端接口和前端逻辑，核心是让后端返回包含产品ID和名称的结构化数据，前端通过Autocomplete直接获取并使用ID：

1. 修改后端fetch_autocomplete_name.php #

修改查询语句，同时获取product_id和product_name，构造符合jQuery Autocomplete要求的JSON结构，同时修复SQL注入风险：

if (isset($_GET['term'])) {
    $term = $_GET['term'];
    // 使用参数绑定避免SQL注入
    $query = $db->prepare("SELECT product_id, product_name FROM products 
                           WHERE product_name LIKE CONCAT('%', :term, '%') LIMIT 10");
    $query->bindParam(':term', $term);
    $query->execute();

    $result = array();
    if ($query->rowCount() > 0) {
        while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
            $result[] = array(
                'label' => $row['product_name'], // 自动补全列表显示的文本
                'value' => $row['product_name'], // 选中后填充到输入框的内容
                'product_id' => $row['product_id'] // 自定义字段，携带产品ID
            );
        }
    }
    echo json_encode($result);
}

2. 修改前端JavaScript逻辑 #

调整Autocomplete配置，在select事件中直接获取ui.item.product_id，无需再通过产品名称查询，同时优化初始化逻辑避免重复绑定：

function select_name(){
    // 给所有product_name开头的input绑定Autocomplete，仅初始化一次
    $("[id^='product_name']").each(function() {
        var $this = $(this);
        var id = $this.attr('id').replace("product_name",'');
        
        if (!$this.data('autocomplete-init')) {
            $this.autocomplete({
                source: 'store_supply/fetch_autocomplete_name.php',
                select: function (event, ui) {
                    event.preventDefault(); // 可选，阻止默认填充逻辑，手动控制输入框内容
                    $this.val(ui.item.label); // 设置输入框显示产品名称
                    
                    var productId = ui.item.product_id; // 直接获取选中产品的ID
                    $.ajax({
                        url:"store_supply_manage/fetch_product_code.php",
                        method:"POST",
                        data:{product_id: productId}, // 传递product_id而非名称
                        dataType:"json",
                        success:function(data){
                            $('#mu_emri_'+id).val(data.mu_name);
                            $('#product_code_'+id).val(data.barCode);
                            $('#vat_vlera_'+id).val(data.vat_value_4);
                            $('#product_id'+id).val(data.product_id);
                            calculateTotal();
                        }
                    });
                }
            });
            $this.data('autocomplete-init', true);
        }
    });
}

3. 调整fetch_product_code.php（配套修改） #

由于现在传递的是product_id，需修改该接口的查询逻辑，通过ID获取产品信息：

if (isset($_POST['product_id'])) {
    $productId = $_POST['product_id'];
    $query = $db->prepare("SELECT mu_name, barCode, vat_value_4, product_id FROM products WHERE product_id = :id");
    $query->bindParam(':id', $productId);
    $query->execute();
    $data = $query->fetch(PDO::FETCH_ASSOC);
    echo json_encode($data);
}

关键说明 #

• 后端返回的JSON数组中，label是自动补全列表的显示文本，product_id作为自定义字段会被Autocomplete完整传递给前端
• 前端直接读取ui.item.product_id，彻底解决同名产品的歧义问题
• 通过参数绑定修复了原代码中的SQL注入风险，提升安全性

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