输入字段上的空白使弹出无法单击

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>

​

我有一个快速搜索栏在我的网站，当点击显示一个列表，可复制的链接。

我面临的问题是点击一个链接什么都不做，这是因为我认为搜索栏一旦点击链接就会失去焦点，所以真正的“单击”发生在链接消失之后。

任何建议都会受到赞赏，即使这是一种不同的方法(可能不使用外部插件)。

我现在用的是引导带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>