"Search Panel with filters"
Bootstrap 3.1.0 Snippet by iosdsv

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Filter by</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#contains">Contains</a></li>
<li><a href="#its_equal">It's equal</a></li>
<li><a href="#greather_than">Greather than ></a></li>
<li><a href="#less_than">Less than < </a></li>
<li class="divider"></li>
<li><a href="#all">Anything</a></li>
</ul>
</div>
<input type="hidden" name="search_param" value="all" id="search_param">
<input type="text" class="form-control" name="x" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
body{
margin-top:20px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
$(document).ready(function(e){
$('.search-panel .dropdown-menu').find('a').click(function(e) {
e.preventDefault();
var param = $(this).attr("href").replace("#","");
var concept = $(this).text();
$('.search-panel span#search_concept').text(concept);
$('.input-group #search_param').val(param);
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Well this works quite perfectly, but as soon as you use it in your project the drop down doesn't work, like u can select only once.

I have followed everything properly keeps CSS and JS on <head></head> and the script in <body> </body> but it misbehaves.

allanm (1) - 5 years ago - Reply 1


This form acts more like a jumplist menu than a search form. As soon as I select the filter item, the "form" jumps to that page, not allowing me enter a search term. Counter-intuitive design.

Rick DeLong () - 7 years ago - Reply 0


drop down not working please let me know how to implement dropdown ?

Pankaj Chaurasia () - 8 years ago - Reply 0


How to get the value of the dropdown button for a php treatment ?

Tetrix () - 9 years ago - Reply 0


very good, but how do you explain a search with wildcards?

jesus israel perales martinez () - 9 years ago - Reply 0


HI, Please explain how it is working?

Ibrahim () - 10 years ago - Reply 0


Thank you!

Erick () - 10 years ago - Reply 0