jquery 实现搜索框失去焦点时隐藏自动提示下拉容器

_Zhijun
  • 164

搜索输入框获取焦点时,自动显示下面的下拉列表容器,

$(input).focus(function(){
    container.addClass("hide")
})

当输入框失去焦点时,自动隐藏

$("input").focusout(function(){
    $(".suggestion-container").addClass("hide")
});

这里还有一个条件,如果鼠标点击下面的下拉列表容器,不希望隐藏下拉列表容器。这要怎么实现呢?

image.png

回复
阅读 748
1 个回答

把blur就关闭的逻辑换成判断点击区域符合再关闭的逻辑就行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Static Template</title>
    <style>
      .input-container {
        position: relative;
      }

      .dropdown {
        position: absolute;
        width: 100%;
        height: 100px;
        background: indianred;
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="input-container">
      <input placeholder="输入" />
      <div class="dropdown"></div>
    </div>
  </body>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script>
    $("input").focus(() => {
      $(".dropdown").show();
    });

    $(document).click((e) => {
      if (!$(".input-container").get(0).contains(e.target)) {
        $(".dropdown").hide();
      }
    });
  </script>
</html>
宣传栏