Mr.SK Mr.SK - 10 days ago 5
HTML Question

HTML - How to make drop-down list content hide on button click?

enter image description hereI have integrated a drop-down menu into my search-bar(using 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>





The textboxes in drop-down act as search filters.
Currently that drop-down menu doesn't hide unless the user clicks outside of that menu. Hence it blocks the other content.

I'm trying to achieve the following :
If I enter a particular data in the textbox and hit enter the drop-down contents should hide.

e.g. I enter 1234 as a search term insisde RequestNo. and Hit Enter the entire drop-down list should get hidden (or collapse back)
(I don't require mouse-hover to achieve this)

What additions should I do to my code to accomplish this?

Answer

You can use keycode to close dropdown on enter press

$('.dropdown-menu.dropdown-menu-right').keypress(function (e) {
    if (e.keyCode == 13) {
      $('.dropdown.dropdown-lg').removeClass('open');
    }
});

$('.dropdown-menu.dropdown-menu-right').keypress(function(e) {
  if (e.keyCode == 13) {
    $('.dropdown.dropdown-lg').removeClass('open');
  }
});
.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>