Laravel中jQuery UI Autocomplete报Uncaught TypeError错误求助

核心原因 #

浏览器抛出的Cannot read properties of undefined (reading 'value')错误，本质是后端返回的数据格式不符合jQuery UI Autocomplete的要求。

jQuery UI Autocomplete默认期望接口返回的每个数据条目包含label（下拉菜单显示的文本）和value（选中后填充到输入框的值）字段（至少要有value）。你当前返回的是id和title字段，组件在处理菜单聚焦逻辑时找不到value属性，因此触发报错。

另外你的前端代码还有一个小问题：Select事件名称应该是小写的select，大写的话事件回调不会被触发。

解决方案 #

方案1：修改后端返回的字段格式

直接在控制器中返回组件需要的字段结构：

public function autoSrchItem(Request $request)
{
   $search = $request->term;
   $result = Item::where('title', 'LIKE', '%'. $search. '%')->get();
   $data = [];
   foreach ($result as $key => $value) {
       // 映射为组件需要的label和value，同时保留id供后续使用
       $data[] = [
           'id' => $value->id,
           'label' => $value->title,
           'value' => $value->title
       ];
   } 
   return response()->json($data);
}

方案2：前端手动转换数据格式（如果不想修改后端）

将source改为函数形式，自行处理后端返回的数据：

<script>
$("#searchName").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "{{ route('item.autoSrchItem') }}",
            data: { term: request.term },
            success: function(data) {
                // 将后端返回的title映射为label和value
                response($.map(data, function(item) {
                    return {
                        label: item.title,
                        value: item.title,
                        id: item.id
                    };
                }));
            }
        });
    },
    minLength: 2,
    autoFocus: true,
    // 注意这里是小写的select
    select: function(e, ui){
        console.log(ui.item);
    }
});
</script>

验证效果 #

修改后重新测试，下拉菜单聚焦时不会再抛出错误，同时select事件也能正常触发，打印出选中的条目数据。

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