使用Bootstrap Select时可搜索下拉选择器无法正常工作求助

你的可搜索下拉选择器无法工作，主要是两个核心问题导致：

1. 版本兼容性问题 #

你使用的bootstrap-select 1.10.0是适配旧版Bootstrap（如3.x）的版本，和你引入的Bootstrap 5.3.3完全不兼容，这是搜索功能失效的首要原因。需要替换为支持Bootstrap 5的bootstrap-select版本。

2. jQuery版本与类型问题 #

你引入的是jQuery Slim版（jquery-3.5.1.slim.min.js），该版本移除了bootstrap-select依赖的$.fn.scrollTo、AJAX等模块，导致组件功能异常。必须使用完整的jQuery版本。

修正后的完整代码 #

<!-- 引入Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入完整jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- 引入Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- 引入支持Bootstrap5的bootstrap-select CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/css/bootstrap-select.min.css" rel="stylesheet">
<!-- 引入支持Bootstrap5的bootstrap-select JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>

<body>
  <div>
    <center>
      <h2>交易创建</h2>
    </center>
  </div>

  <div class="container-fluid p-2 sc_table b-5">
    <form action="" method="post">
      <div class="mb-3">
        <label for="FromACC" class="form-label" data-toggle="tooltip" data-placement="bottom" title="资金转出时选现金/银行账户，需将收入作为利息处理时选利息账户">贷方账户</label>
        <select id='FromACC' name='frmac' class="selectpicker" data-show-subtext="true" data-live-search="true">
          <option data-tokens="dummy" value="0" selected>选择账户</option>
          <option data-tokens="13000013 - CashBank" value="13">13000013 - CashBank</option>
          <option data-tokens="202311433 - Interest Account" value="33">202311433 - Interest Account</option>
          <option data-tokens="202311934 - IIA" value="34">202311934 - IIA</option>
          <option data-tokens="202311735 - IEA" value="35">202311735 - IEA</option>
          <option data-tokens="13001313 - Cash" value="36">13001313 - Cash</option>
          <option data-tokens="13130013 - Bank" value="53">13130013 - Bank</option>
        </select>
      </div>
      <button type="submit" name="tran_submit" class="btn btn-primary">提交</button>
    </form>
  </div>

  <script>
    $(function() {
      $('.selectpicker').selectpicker();
    });
  </script>
</body>

额外说明 #

• 移除了多余的Popper.js引用：Bootstrap 5的bootstrap.bundle.min.js已经包含了Popper.js，无需单独引入。
• 确保所有依赖库的加载顺序：先加载jQuery，再加载Bootstrap，最后加载bootstrap-select，这是组件正常初始化的必要条件。

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