Laravel 5.5+Typeahead.js双列自动补全无法获取用户ID问题

我明白你现在的困境：前端已经能正常显示全名的自动补全建议，但提交时因为后端拿完整的名字字符串去匹配单独的FirstName或LastName字段，自然匹配不到对应的ID。下面给你两种可行的解决方案，优先推荐第一种（更可靠、高效）：

方案一：前端传递用户ID（推荐） #

核心思路是让Typeahead返回包含ID和全名的结构化数据，前端显示全名，但实际提交时传递用户ID（通过隐藏输入框），彻底避免名字匹配的问题。

1. 修改SearchController.php的autocomplete方法 #

返回包含用户ID和组合全名的数组，而不是单纯的名字字符串：

public function autocomplete(Request $request) {
    $datas = Customers::select("id", "FirstName", "LastName")
        ->where(function($q) use($request) {
            $q->where("FirstName", "LIKE","%{$request->input('query')}%")
              ->orWhere("LastName", "LIKE","%{$request->input('query')}%");
        })->get();

    // 转换为包含ID和全名的结构化数据
    $dataModified = $datas->map(function($customer) {
        return [
            'id' => $customer->id,
            'full_name' => $customer->FirstName . ' ' . $customer->LastName
        ];
    });

    return response()->json($dataModified);
}

2. 修改视图，添加隐藏输入框 #

用于存储选中用户的ID，提交表单时传递这个ID：

{!! Form::open(['action' => 'JobsController@store', 'method' => 'POST']) !!}
{{Form::text('customer_name_display', '', ['class' => 'form-control typeahead', 'placeholder' => 'Type in customer name...'])}}
<!-- 新增隐藏输入框，存储用户ID -->
{{Form::hidden('customer_id', '', ['id' => 'customer_id'])}}
{{Form::submit('Create Job', ['class' => 'btn btn-primary mt-2'])}}
{!! Form::close() !!}

3. 更新前端Typeahead逻辑 #

处理结构化数据，选中建议时把ID存入隐藏输入框：

<script type="text/javascript">
var path = "{{ route('autocomplete') }}";
$('input.typeahead').typeahead({
    source: function(query, process) {
        return $.get(path, { query: query }, function(data) {
            // 提取用于显示的全名列表
            var displayNames = data.map(item => item.full_name);
            // 处理显示建议，同时把原始数据存到组件中
            process(displayNames);
            $('input.typeahead').data('typeahead').rawData = data;
        });
    },
    // 选中建议时触发的逻辑
    updater: function(selectedName) {
        // 找到选中名字对应的用户ID
        var selectedUser = $('input.typeahead').data('typeahead').rawData.find(item => item.full_name === selectedName);
        // 把ID存入隐藏输入框
        $('#customer_id').val(selectedUser.id);
        // 返回选中的名字，显示在输入框中
        return selectedName;
    }
});
</script>

4. 修改JobsController.php的store方法 #

直接获取隐藏输入框的ID即可：

public function store(Request $request) {
    $job = new Jobs;
    // 直接从隐藏字段拿ID，无需再查询数据库
    $job->cust_id = $request->input('customer_id');
    dump($job->cust_id);
    // 后续保存逻辑
    // $job->save();
}

方案二：后端拆分全名匹配（不推荐，有局限性） #

如果一定要传递全名，后端可以拆分字符串后匹配FirstName和LastName，但这种方法存在缺陷（比如名字包含空格时拆分错误、同名同姓用户匹配不准确）：

修改JobsController.php的store方法：

public function store(Request $request) {
    $fullName = $request->input('customer_name');
    // 按空格拆分全名，最多拆成两部分（处理名字含空格的情况）
    list($firstName, $lastName) = explode(' ', $fullName, 2);
    
    $job = new Jobs;
    // 注意用where同时匹配名和姓，而不是orWhere
    $job->cust_id = Customers::where('FirstName', $firstName)
        ->where('LastName', $lastName)
        ->value('id');
    dump($job->cust_id);
}

注意事项 #

• 测试autocomplete路由：可以直接在浏览器访问/autocomplete?query=Test，确认返回的JSON数据是否包含ID和全名。
• 确保前端隐藏输入框的ID与jQuery选择器一致，避免找不到元素。
• Laravel 5.5版本要确认Customers模型的命名空间正确引入，避免类找不到的错误。

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