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>I have a quick search bar in my website which when clicked shows a list clicable links.
The problem I'm facing is that clicking a link does nothing, and that's because I think the search bar loses focus as soon as I click the link, and so the actual "click" happens after the link already disappeared.
Any suggestion is appreciated, even if it's a different approach (possibly without using external plugins).
I'm using Bootstrap 5 and plain JS at the moment.
You can use setTimeout to postpone the hiding after the click event. Also, if you do not want to hide the list if an item is clicked, then you could simply add a conditional for the blur.
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>If you place the search bar and search modules in the same parent-element, you can just use 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>