如何防止Bootstrap4下拉選單在輸入元素點擊時顯示？

以下是一個簡單的引導下拉選單，但切換元素是文本輸入。我不希望下拉選單顯示在click事件上，而是希望在用戶輸入時顯示它，以便我可以根據該輸入動態填充選單。

下面的click事件處理程式防止在用戶在 input 元素中輸入任何內容之前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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

uj5u.com熱心網友回復：

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

為了防止下拉選單在輸入欄位為空時打開，請阻止該show.bs.dropdown事件。注意：

所有 dropdown 事件都在.dropdown-menu的父元素上觸發并具有一個relatedTarget屬性，其值是切換的錨元素。

要在欄位中出現資料時顯示串列，并在欄位變空時隱藏，可以使用該.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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

標籤：javascript 查询 bootstrap-4 事件传播

上一篇：每行和每列僅選擇一個表格單元格

下一篇：PDF下載按鈕