function showSuggestions(){ let searchableModulesDiv = document.getElementById('searchableModules'); searchableModulesDiv.classList.remove('d-none'); } function hideSuggestions(){ let searchableModulesDiv = document.getElementById('searchableModules'); searchableModulesDiv.classList.add('d-none'); } function filterSuggestions() { } .prj-searchable-modules{ position:fixed; margin-top: 70px; z-index: 2; width:100%; } .d-none { display: none; } <form id="searchBar" class="w-100 d-inline-flex"> <!-- ... icons, labels, etc --> <input type="text" class="form-control" id="searchInput" placeholder="Module search..." onfocus="showSuggestions();" onblur="hideSuggestions();" onkeyup="filterSuggestions();"> </form> <div id="searchableModules" class="card shadow-sm border-secondary rounded-3 prj-searchable-modules d-none"> <ul class="nav flex-column"> <li class="nav-item text-start"> <a class="nav-link" href="calendar.html"> <i class="fas fa-calendar-alt fa-fw"></i><span class="ps-3">Calendar</span></a> </li> <!-- ... more li items --> </ul> </div>Tengo una barra de búsqueda rápida en mi sitio web que, cuando se hace clic, muestra una lista de enlaces en los que se puede hacer clic.
El problema al que me enfrento es que hacer clic en un enlace no hace nada, y eso se debe a que creo que la barra de búsqueda pierde el foco tan pronto como hago clic en el enlace, por lo que el "clic" real ocurre después de que el enlace ya desapareció.
Se agradece cualquier sugerencia, incluso si se trata de un enfoque diferente (posiblemente sin usar complementos externos).
Estoy usando Bootstrap 5 y JS simple en este momento.
Puede usar setTimeout para posponer la ocultación después del evento de clic. Además, si no desea ocultar la lista si se hace clic en un elemento, simplemente puede agregar un condicional para el desenfoque.
function showSuggestions(){ let searchableModulesDiv = document.getElementById('searchableModules'); searchableModulesDiv.classList.remove('d-none'); } function hideSuggestions(){ setTimeout(() => { let searchableModulesDiv = document.getElementById('searchableModules'); searchableModulesDiv.classList.add('d-none'); }, 100); } function filterSuggestions() { } .prj-searchable-modules{ position:fixed; margin-top: 70px; z-index: 2; width:100%; } div.d-none > #searchableModules { display: none; } <form id="searchBar" class="w-100 d-inline-flex"> <!-- ... icons, labels, etc --> <input type="text" class="form-control" id="searchInput" placeholder="Module search..." onfocus="showSuggestions();" onblur="hideSuggestions();" onkeyup="filterSuggestions();"> </form> <div id="searchableModules" class="card shadow-sm border-secondary rounded-3 prj-searchable-modules" onclick="console.log('clicked'); hideSuggestions();"> <ul class="nav flex-column"> <li class="nav-item text-start"> <a class="nav-link" href="#"> <i class="fas fa-calendar-alt fa-fw"></i><span class="ps-3">Calendar</span></a> </li> <!-- ... more li items --> </ul> </div>Si coloca la barra de búsqueda y los módulos de búsqueda en el mismo elemento principal, solo puede usar CSS.
.search-ctr:focus-within #searchableModules { display:block; } #searchableModules { display: none; } <div class='search-ctr'> <form id="searchBar" class="w-100 d-inline-flex"> <!-- ... icons, labels, etc --> <input type="text" class="form-control" id="searchInput" placeholder="Module search..." onfocus="showSuggestions();" onblur="hideSuggestions();" onkeyup="filterSuggestions();"> </form> <div id="searchableModules" class="card shadow-sm border-secondary rounded-3 prj-searchable-modules d-none"> <ul class="nav flex-column"> <li class="nav-item text-start"> <a class="nav-link" href="calendar.html"> <i class="fas fa-calendar-alt fa-fw"></i><span class="ps-3">Calendar</span></a> </li> <!-- ... more li items --> </ul> </div>