A continuación se muestra un menú desplegable de arranque simple, con la excepción de que el elemento de alternancia es una entrada de texto. No quiero que el menú desplegable se muestre en el evento de click , sino que quiero mostrarlo en la entrada del usuario, para poder llenar dinámicamente el menú en función de esa entrada.
El controlador de eventos de click a continuación evita que se muestre el menú desplegable antes de que el usuario haya ingresado algo en el elemento de entrada, y cuando hay alguna entrada, el controlador de input muestra el menú desplegable. Sin embargo, una vez que el usuario ha ingresado algo en el elemento, se muestra el menú desplegable. Posteriormente, cualquier click subsiguiente en el elemento de entrada muestra el menú desplegable y el controlador de click se ejecuta, pero no evita que se muestre el menú desplegable incluso si el usuario borra todas las entradas.
¿Adjunta Bootstrap algún evento nuevo o no entiendo muy bien los eventos? ¿Cómo podría hacer que esto funcione?
$('#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>No es necesario agregar nuevos controladores de clics. Use los eventos y métodos de Bootstrap en su lugar:https://getbootstrap.com/docs/4.6/components/dropdowns/#methods
Para evitar que el menú desplegable se abra cuando el campo de entrada está vacío, bloquee el evento show.bs.dropdown . Tenga en cuenta que:
Todos los eventos desplegables se activan en el
.dropdown-menuy tienen una propiedad derelatedTargetrelacionada, cuyo valor es el elemento ancla de alternancia.
Para mostrar la lista cuando aparecen datos en el campo y ocultarla cuando el campo queda vacío, puede usar el método .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>