使用原生Bootstrap替代Tabler时Bootstrap Select Picker报错及datalist问题

报错修复方案 #

你遇到的Cannot read properties of undefined (reading 'Constructor')报错，本质是bootstrap-select没有正确识别到Bootstrap的核心实例，结合你用Tabler的场景，修复步骤如下：

• 版本对齐：先确认你引入的bootstrap-select版本和Tabler内置的Bootstrap版本匹配：bootstrap-select v1.13.x对应Bootstrap 4，v1.14+对应Bootstrap 5，不要额外引入和Tabler内置版本不一致的Bootstrap文件，避免多版本冲突。
• 调整加载顺序：资源必须按以下顺序加载：
  1. Tabler CSS文件
  2. Bootstrap Select CSS文件
  3. 自定义CSS文件
  4. Bootstrap 核心JS文件
  5. Popper.js（Bootstrap 5对应@popperjs/core）
  6. Tabler JS文件
  7. Bootstrap Select JS文件
• 如果你完全不使用Tabler的样式和脚本，直接删除所有Tabler的CSS、JS引用，按原生Bootstrap+bootstrap-select的标准流程引入即可。

datalist隐藏指定选项方案 #

你用datalist实现带搜索的下拉功能时，要隐藏「manage personal info」条目，有两种兼容性最好的方案：

方案1：直接给目标option加属性 #

给要隐藏的option加上hidden和disabled属性即可，不会影响其他选项的正常匹配：

<input class='form-control' list='datalistOptions' placeholder='Type to search...'/>
<datalist id='datalistOptions'>
  <option value='Aruba'/>
  <option value='Afghanistan'/>
  <option value='Angola'/>
  <option value='Anguilla'/>
  <option value='Albania'/>
  <!-- 要隐藏的条目 -->
  <option value='manage personal info' hidden disabled/>
</datalist>

方案2：通过CSS隐藏 #

如果不想修改HTML结构，直接加如下CSS规则即可：

#datalistOptions option[value="manage personal info"] {
  display: none;
}

datalist的展示效果如下：

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