如何阻止点击输入框时触发Bootstrap 4下拉菜单显示

• 你在input元素上添加了data-toggle="dropdown"属性，Bootstrap会自动为带有该属性的元素绑定默认的点击触发下拉逻辑，同时下拉组件内部会维护独立的显示/隐藏状态。
• 首次调用dropdown('show')后，组件内部状态会更新为已显示，后续点击输入框时，Bootstrap自带的触发逻辑优先级高于你自定义的click阻止逻辑，导致你写的preventDefault和stopPropagation无法生效。

直接移除input标签中的data-toggle="dropdown"属性即可，去掉该属性后Bootstrap不会再自动绑定点击触发逻辑，下拉菜单的显示完全由你主动调用的API控制，刚好匹配你的自定义触发需求。

调整后的代码如下：

JS代码 #

$('#exampleFormControlInput1').on('input', e => {
  const inputContent = e.target.value.trim()
  if (inputContent) {
    // 有输入内容时显示下拉，可在此处动态填充下拉选项
    $('#exampleFormControlInput1').dropdown('show')
  } else {
    // 输入内容清空时隐藏下拉
    $('#exampleFormControlInput1').dropdown('hide')
  }
})
// 无需额外绑定click阻止事件，移除data-toggle后默认点击不会触发下拉

HTML代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<div class="container">
  <div class="dropdown">
    <label for="exampleFormControlInput1" class="form-label" id="dropdownMenuButton1">Input with autocomplete</label>
    <!-- 移除了data-toggle="dropdown"属性 -->
    <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Search for something" aria-expanded="false">
    <ul class="dropdown-menu" aria-labelledby="exampleFormControlInput1">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
</div>

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