如何让jQuery Autocomplete表单将值分别填入两个文本框？

我来帮你搞定这个需求！你当前的Autocomplete配置里，选中选项后默认只会把value值填充到触发输入框，所以咱们需要做两个关键调整：扩展返回的选项数据，以及添加select事件回调来手动控制两个文本框的内容。

步骤1：调整前端Autocomplete的选项数据返回 #

首先，在source回调的$.map里，把CardId也附加到每个选项对象中，同时把value设为CardName（这样默认显示更符合预期）：

$(document).ready(function () { 
    $("#CardName").autocomplete({ 
        source: function (request, response) { 
            $.ajax({ 
                url: "/CardHolderDetails/Index", 
                type: "POST", 
                dataType: "json", 
                data: { Prefix: request.term }, 
                success: function (data) { 
                    response($.map(data, function (item) { 
                        // 扩展选项对象，带上CardId，同时把value设为CardName
                        return { 
                            label: item.CardName, 
                            value: item.CardName, 
                            cardId: item.CardId 
                        }; 
                    })) 
                } 
            }) 
        }, 
        messages: { noResults: "", results: "" },
        // 步骤2：添加select事件处理函数
        select: function(event, ui) {
            // 阻止默认的填充行为（避免把value覆盖成其他值）
            event.preventDefault();
            // 填充CardName文本框
            $("#CardName").val(ui.item.label);
            // 填充CardId文本框
            $("#CardId").val(ui.item.cardId);
        },
        // 可选：添加focus事件，键盘导航时输入框显示选项名称
        focus: function(event, ui) {
            event.preventDefault();
            $("#CardName").val(ui.item.label);
        }
    }); 
})

步骤2：后端代码无需修改 #

你的后端Index Action已经正确返回了CardName和CardId字段，所以不需要做任何调整，前端可以直接通过ui.item.cardId拿到对应的ID值。

效果验证 #

现在当你在CardName输入框选中某个选项后：

• CardName文本框会显示选中的卡片名称（比如"apple"对应的"Apple"）
• CardId文本框会自动填充对应的ID值（比如"1"）

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