用户输入3个数据后如何显示select2

Posted 2023-05-07

【中文标题】用户输入3个数据后如何显示select2

【英文标题】：how to display select2 after user input 3 data

【发布时间】：2020-05-16 23:41:31

【问题描述】：

我这里有select2来显示用户email数据，但是数据可能高达几万，这让我的select2很慢，有没有办法只在用户输入3个字母后才显示？

这是我的脚本选择2

$('#add_form').find("#list_user").select2(
                              width: "100%",
                              placeholder: "Choose User by Email...",
                              ajax: 
                                url: " route('getuser') ",
                                dataType: "json",
                                delay: 250,
                                processResults: function(data) 
                                  return 
                                    results: $.map(data, function(obj) 
                                      return 
                                        id: obj.email,
                                        text: obj.email
                                      ;
                                    )
                                  ;
                                ,
                              
                            );

这是我的控制器

public function getUser(Request $request)
        
            $search = $request->input('term', '');
            $user = DB::table('users.users')->where('email','LIKE','%'.$search.'%')
                    ->get();
            return response()->json($user);
        

【问题讨论】：

问题仅仅是由于数据的权重。向 DOM 添加 10,000 个元素（或者甚至是其倍数，因为 Select2 选项包含 2 或 3 个单独的元素）永远不会很快。我建议您改为使用自动完成字段并通过 AJAX 在您的服务器上实现搜索逻辑。

@RoryMcCrossan 您如何看待 jquery 自动完成插件？能解决我的问题吗？

这可行，但实现自动完成功能只是解决方案的一半。正如我所提到的，您需要编写控制器逻辑来执行搜索/过滤/分页

【参考方案1】：

解决您的问题的唯一方法是只获取一些记录并显示它们。然后从select中你需要调用控制器再次搜索数据并显示它。

为此，您可以将查询更改为

user = DB::table('users.users')->where('email','LIKE','%'.$search.'%')->take(10)->get()

对于可搜索的选择，您可以参考 this link 和此 JSFiddle link