I was using the code snippet from
http://bootsnipp.com/snippets/featured/advanced-dropdown-search
I made the following changes to the code
<div class="col-md-12">
<form action="./" method="POST" autocomplete="on">
<div class="input-group" id="adv-search">
<input type="text" class="form-control"
placeholder="Search for snippets" id="mainForm" name="searchBox" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</button>
<span class="dropdown-menu dropdown-menu-right" role="menu">
<div class="form-horizontal" role="form">
<div class="form-group">
<label for="filter">Filter by</label> <select
class="form-control" name="docType">
<option value="0" selected>All Sources</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<div class="form-group">
<label for="contain">Author / Modifier</label> <input
class="form-control" type="text" name="authorName" />
</div>
<div class="form-group">
<label for="contain">Contains the words</label> <input
class="form-control" type="text" name="words" />
</div>
<!-- <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> -->
</div>
</span>
</div>
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</form>
</div>
After shifting the form tag above, the drop down menu is collapsing by just clicking anywhere on the dropdown.
Can someone please explain why?
I tried doing a lot of changes but nothing worked for me.
https://jsfiddle.net/tj2y5ptp/
Try removing data-toggle="dropdown"
and using jquery .toggleClass('open');
and .removeClass('open');
to open/close
the dropdown menu, (then dropdown nenu will close just by clicking outside it (on Body) :
Open Dropdown:
$('.dropdown-lg .btn').on('click', function (event) {
$(this).parent().toggleClass('open');
});
Close Dropdown (when click on body):
$('body').on('click', function (e) {
if (!$('.dropdown-lg').is(e.target)
&& $('.dropdown-lg').has(e.target).length === 0
&& $('.open').has(e.target).length === 0
) {
$('.dropdown-lg').removeClass('open');
}
});
See Updated fiddle, I hope it helps you, Thanks.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With