Laravel 9中JQuery UI AutoComplete如何设置显示值为表单提交值

问题场景 #

在Laravel 9应用中使用jQuery-UI实现候选人自动补全功能：

• 数据源包含候选人的pid、eid、cid和姓名信息
• 控制器已正确返回包含value、label、pid、eid的JSON数据
• 自动补全下拉显示正常，选择后能填充对应输入框
• 但提交表单时，所有输入框的值都无法传递到后端

核心原因 #

HTML表单提交时，仅会携带带有name属性的表单元素的值。当前表单中的#candidate_search、#cid、#pid、#eid输入框都缺少name属性，因此提交时这些字段不会被包含在请求数据中。

解决方案 #

给每个需要提交的输入框添加对应的name属性，确保表单能识别并传递这些字段的值。

修改后的表单代码 #

<form action="{{ route('complaints.store') }}" method="post" enctype="multipart/form-data">
    @csrf
    <!-- 显示候选人名称的输入框，添加name属性 -->
    <input type="text" id='candidate_search' name="candidate_name">
    <!-- 隐藏字段（可选，若不需要用户看到），添加name属性 -->
    <input type="hidden" id='cid' name="cid">
    <input type="hidden" id='pid' value="" name="pid">
    <input type="hidden" id='eid' name="eid">
    
    <input class="button secondary" type="submit" name="save" value="Save all changes">
</form>

说明 #

1. 添加name属性后，表单提交时会以name属性的值作为键，输入框内容作为值发送到后端
2. 若不需要用户看到cid、pid、eid这些字段，可将它们的type改为hidden，既不影响页面展示，也能正常提交数据
3. 在Laravel的ComplaintsController的store方法中，可通过以下方式获取提交的值：

public function store(Request $request)
{
    $candidateName = $request->input('candidate_name');
    $cid = $request->input('cid');
    $pid = $request->input('pid');
    $eid = $request->input('eid');
    
    // 后续业务逻辑处理
}

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