输入字段上的 onblur 使弹出窗口不可点击

Question

    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>

我的网站上有一个快速搜索栏，点击后会显示一个可链接的列表。

我面临的问题是点击链接什么也没做，那是因为我认为一旦我点击链接搜索栏就会失去焦点，所以实际的“点击”发生在链接已经消失之后。

欢迎提出任何建议，即使是不同的方法（可能不使用外部插件）。

我目前正在使用 Bootstrap 5 和纯 JS。

Answer 1

您可以使用setTimeout 推迟点击事件后的隐藏。此外，如果您不想在单击某个项目时隐藏列表，那么您可以简单地为模糊添加一个条件。

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>

Answer 2

如果您将搜索栏和搜索模块放在同一个父元素中，则可以只使用 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>