Question

我的目标是，当有人在输入文本字段中搜索时，只需在HTML正文中添加透明背景

在搜索之前

搜索

后

代码

<body>
  <div class="container">
    <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="/">Testing</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">

      <form novalidate="novalidate" onsubmit="return false;" class="searchbox sbx-amazon" style="margin-left: 20%" id="search-realtime">
        <div role="search" class="sbx-amazon__wrapper">
          <input type="search" id="search_input" name="search" placeholder="Search your product.." autocomplete="off" required="required" class="sbx-amazon__input">
          <button type="submit" title="Submit your search query." class="sbx-amazon__submit">
            <svg role="img" aria-label="Search">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-11"></use>
            </svg>
          </button>
          <button type="reset" title="Clear the search query." class="sbx-amazon__reset">
            <svg role="img" aria-label="Reset">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-clear-2"></use>
            </svg>
          </button>
        </div>
      </form>
    </div>
  </div>
</nav>


   </div>

</body>

稍后在搜索输入上，输入"I will"以查看结果您可以查看jsfiddle以获取完整代码https://jsfiddle.net/Ldpqhkam/2/

Answer 1

只需在div（最好是在底部）的某处创建body元素，就像这样：

<div id="search-overlay"></div>

并给它这个CSS：

#search-overlay { position:fixed; top:52px; bottom:0; left:0; right:0; background:#000; opacity:.5; display:none; }

然后，您可以通过挂钩自动填充的相应事件来切换此叠加层display的{{1}}属性，即div和autocomplete:shown

请参阅此处的工作示例： https://jsfiddle.net/Ldpqhkam/5/

如何在搜索时添加透明背景？

1 个答案: