单击输入字段时切换显示样式

Question

我希望显示一个动态生成的列表，只要我的这个特定输入字段处于活动状态，但是当我在输入框列表外单击时应该隐藏。当您运行剪切时，无论输入字段是否被聚焦或点击，都会显示列表，我希望它在未聚焦时隐藏。

到目前为止，我已尝试实施它，但这不起作用

＆＃13;

＆＃13;

$("#pickup input").click(function() {
  var num = $(this).find("ul.suggestbox").length;
  if (num > 0) {
    $(".suggestbox ul").toggleClass("clickdisplay");
  }
});

＆＃13;

.suggestbox {
  overflow: auto;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 1px 1px;
  z-index: 1;
}
.clickdisplay {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form>
  <div class="input-field" style="width: 30%">
    <label class="label-icon" for="search"><i class="material-icons">search</i>
    </label>
    <input id="pickup" placeholder="location" type="search" autocomplete="off" required>
  </div>
  <ul class="suggestbox" id="sub_navlist">
<li> option 1 </li>
<li> option 2 </li>
<li> option 3 </li>
<li> option 4 </li>
<li> option 5 </li>
<li> option 6 </li>
<li> option 7 </li>
</ul>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试焦点和模糊事件：

$("#pickup").on('focus', function() {
  var num = $(this).closest('form').find("ul.suggestbox").length;
  if (num > 0) {
    $(".suggestbox").addClass("clickdisplay");
  }
});
$("body").on('click', function(e) {
  if ($(e.target).closest('ul.suggestbox,#pickup').length == 0) {//check if the element selected is the input or the list
    var num = $("ul.suggestbox").length;
    if (num > 0) {
      $(".suggestbox").removeClass("clickdisplay");
    }
  }
});

.suggestbox {
  overflow: hidden;
  height:0;
  background-color: #f9f9f9;
  max-width: 170px;
  margin-top:0;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 1px 1px;
  z-index: 1;
}
.clickdisplay {
  display: block;
  height:auto;
}
body {
  height: 400px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form>
  <div class="input-field" style="width: 30%">
    <label class="label-icon" for="search"><i class="material-icons">search</i></br>
    </label>
    <input id="pickup" placeholder="location" type="search" autocomplete="off" required>
  </div>
  <ul class="suggestbox" id="sub_navlist">
    <li>option 1</li>
    <li>option 2</li>
    <li>option 3</li>
    <li>option 4</li>
    <li>option 5</li>
    <li>option 6</li>
    <li>option 7</li>
  </ul>
</form>

Answer 2

$（this）不是你想象的那样。

我认为你打算这样做：

＆＃13;

＆＃13;

$(function() {
  $("#pickup").on("focus", function() {
    var $list = $(this).closest(".input-field").find("ul.suggestbox");
    $list.toggle($list.length > 0); // show it if it is not empty
  }).on("blur", function() {
    var $list = $(this).closest(".input-field").find("ul.suggestbox");
    $list.hide(); // hide this list
  }).focus();
});

＆＃13;

.suggestbox {
  overflow: auto;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 1px 1px;
  z-index: 1;
  margin-top:-3px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="input-field" style="width: 30%">
    <label class="label-icon" for="pickup"><i class="material-icons">search</i>
    </label>
    <input id="pickup" placeholder="location" type="search" autocomplete="off" required>
    <ul class="suggestbox" id="sub_navlist">
      <li>option 1</li>
      <li>option 2</li>
      <li>option 3</li>
      <li>option 4</li>
      <li>option 5</li>
      <li>option 6</li>
      <li>option 7</li>
    </ul>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以捕获文档上的点击事件，如果#pickup处于活动状态，则显示列表：

＆＃13;

＆＃13;

$(document).on("click",function() {
var num = $("ul.suggestbox").length;
  if (num > 0) {
    $(".suggestbox").toggle($("#pickup").is(":focus") || $(".suggestbox").is(":hover"));
  }
});

＆＃13;

.suggestbox {
  overflow: auto;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 1px 1px;
  z-index: 1;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="input-field" style="width: 30%">
    <label class="label-icon" for="search"><i class="material-icons">search</i>
    </label>
    <input id="pickup" placeholder="location" type="search" autocomplete="off" required onkeypress="somefunction(platform, 'pickup')">
  </div>
  <ul class="suggestbox" id="sub_navlist"><li>item1</li><li>item2</li></ul>
</form>

＆＃13;

＆＃13;

＆＃13;