如何防止 Bootstrap 4 下拉菜单在输入元素点击时显示？

Question

以下是一个简单的 bootstrap 下拉菜单，但切换元素是文本输入。我不希望下拉菜单在 click 事件中显示，而是希望在用户输入时显示它，以便我可以根据该输入动态填充菜单。

下面的 click 事件处理程序可防止在用户在输入元素中输入任何内容之前显示下拉菜单，并且当有任何输入时，input 处理程序会显示下拉菜单。但是，一旦用户在元素中输入了一些内容，就会显示下拉列表。之后，输入元素上的任何后续 click 都会显示下拉菜单，并且 click 处理程序会运行但不会阻止下拉菜单显示，即使用户清除了所有输入也是如此。

Bootstrap 是否附加了任何新事件，还是我对事件不是很了解？我怎样才能完成这项工作？

$('#exampleFormControlInput1').on('click', e=>{
  e.preventDefault();
  e.stopPropagation();
  console.log('Dropdown prevented');
});

$('#exampleFormControlInput1').on('input', e=>{
  $('#exampleFormControlInput1').dropdown('show');
});

<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>
    <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Search for something" data-toggle="dropdown" 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>

Answer 1

您不需要添加新的点击处理程序。改用 Bootstrap 的事件和方法： https://getbootstrap.com/docs/4.6/components/dropdowns/#methods

要防止在输入字段为空时打开下拉菜单，请阻止 show.bs.dropdown 事件。请注意：

All dropdown events are fired at the .dropdown-menu’s parent element and have a relatedTarget property, whose value is the toggling anchor element.

要在字段中出现数据时显示列表，在字段为空时隐藏列表，可以使用.dropdown()方法。

https://codepen.io/glebkema/pen/RwZMNzE?editors=1011

$(function() {

  // prevent the list from opening by clicking on an empty field
  $(".dropdown").on("show.bs.dropdown", function(e) {
    if (!e.relatedTarget.value) {
      return false;
    }
  });

  // handle changes in the input field
  $("#exampleFormControlInput1").on("input", function(e) {
    if (this.value) {
      $(this).dropdown("show");
    } else {
      $(this).dropdown("hide");
    }
  });
});

<div class="container">
  <div class="dropdown">
    <label for="exampleFormControlInput1" class="form-label" id="dropdownMenuButton1">Input with autocomplete</label>
    <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Search for something" data-toggle="dropdown" 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>

<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>

如何防止 Bootstrap 4 下拉菜单在输入元素点击时显示？

How to prevent Bootstrap 4 dropdown to show on input element click?

javascript

jquery

event-propagation

bootstrap-4