Bootstrap 5中Selectpicker实时搜索功能故障求助

你的问题核心在于Bootstrap 5本身并不自带selectpicker组件，这个带实时搜索的下拉选择器是第三方插件「Bootstrap Select」提供的功能——你只引入了原生Bootstrap的资源，缺少插件的依赖文件，所以实时搜索功能无法正常触发。

修复步骤如下：

1. 补充引入Bootstrap Select的资源文件
   在你的HTML代码中，按顺序添加插件的CSS和JS：

   • 在Bootstrap CSS之后添加插件的CSS
   • 在Bootstrap JS之后添加插件的JS

2. 完整修复后的代码
   替换你的原有代码为以下版本，确保资源引入顺序正确：

   <!doctype html>
   <html lang="en">
   
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>SelectPicker</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <!-- 新增Bootstrap Select样式文件 -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/css/bootstrap-select.min.css">
   </head>
   
   <body>
     <div class="container">
       <div class="card mt-4">
         <div class="card-header">
           <h6>Select Picker</h6>
         </div>
         <div class="card-body">
           <select class="form-select selectpicker" data-live-search="true">
             <option selected value="">Type here to find contents</option>
             <option value="1">Option 1</option>
             <option value="2">Option 2</option>
             <option value="3">Option 3</option>
             <option value="4">Option 4</option>
           </select>
         </div>
       </div>
     </div>
   
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
     <!-- 新增Bootstrap Select脚本文件 -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>
   </body>
   
   </html>
   

3. 额外提示

   • 插件会自动识别带有selectpicker类的元素，配合data-live-search="true"属性即可启用实时搜索，无需额外手动初始化。
   • 如果是动态生成的下拉选择框，需要手动触发初始化：

     $('.selectpicker').selectpicker();
     

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