【发布时间】：2017-04-13 00:28:24
【问题描述】：
我在搜索栏中集成了一个下拉菜单（使用 Bootstrap）
.dropdown.dropdown-lg .dropdown-menu {
margin-top: -1px;
padding: 6px 20px;
}
.input-group-btn .btn-group {
display: flex !important;
}
.btn-group .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group .btn:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-group .form-control:last-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
@media screen and (min-width: 1000px) {
#adv-search {
width: 1110px;
margin: 0 auto;
}
.dropdown.dropdown-lg {
position: static !important;
}
.dropdown.dropdown-lg .dropdown-menu {
min-width: 1110px;
}
}<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<body>
<div class="container">
<div class="row">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search" id="searchBar" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<button type="reset" class="btn btn-warning" id="clearAll" style="background-color:#cc0000">
<span class="glyphicon glyphicon-remove"></span>
</button>
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form" style="font-family:Calibri;font-size:16px;background-color:#F7F7F7">
<br />
<div class="form-group row">
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtRequestNo" />
</div>
<label for="ReferenceNo" class="col-xs-2 col-form-label">Reference No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtReferenceNo" />
</div>
<label for="CreatedBy" class="col-xs-2 col-form-label">Created By</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtCreatedBy" />
</div>
</div>
</form>
</div>
</div>
<button type="button" class="btn btn-primary" onclick="ReloadData()"><span class="glyphicon glyphicon-search" aria-hidden="true" onclick="ReloadData()"></span>
</button>
</div>
</div>
</div>
</div>
</div>下拉列表中的文本框充当搜索过滤器。 目前，除非用户在该菜单之外单击，否则该下拉菜单不会隐藏。因此它会阻止其他内容。
我正在努力实现以下目标： 如果我在文本框中输入特定数据并点击输入，下拉内容应该隐藏。
例如我在 RequestNo 中输入 1234 作为搜索词。并且 按 Enter 整个下拉列表应该被隐藏（或向后折叠） （我不需要鼠标悬停来实现这一点）
我应该对我的代码做些什么来完成这个？
【问题讨论】：
-
您只想在用户按下回车后关闭下拉菜单？
-
我需要提供两个选项：按下 Enter 按钮或单击搜索图标时
标签： javascript html css twitter-bootstrap drop-down-menu