以下是一個簡單的引導下拉菜單，但切換元素是文本輸入。我不希望下拉菜單顯示在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>您不需要添加新的點擊處理程序。改用 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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句