<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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-md-8"> <div class="input-group"> <input type="text" class="form-control" value="* > access"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button> <ul id="the-menu" class="dropdown-menu pull-right" style="padding: 8px 12px 8px 12px"> <li> <table><tbody> <tr valign="top"> <td> <li>HOST <span class="hint">(empty or * for all)</span></li> <li><input style="width:100%; padding: 4px" type="text" name="filter" value="*" placeholder="prod*, 168.192..."></li> <li><input type="checkbox" checked> backend1 (54.198.200.41)</li> <li><input type="checkbox" checked> backend2 (54.198.200.41)</li> <li><input type="checkbox" checked> backend3 (54.198.200.41)</li> <li><input type="checkbox" checked> backend4 (54.198.200.41)</li> <li><input type="checkbox" checked> backend5 (54.198.200.41)</li> <li style="text-align: right"><a href="#all">+ more hosts...</a></li> </td> <td>  </td> <td> <li>LOG <span class="hint">(empty or * for all)</span></li> <li><input style="width:100%; padding: 4px" type="text" name="filter" value="access" placeholder="prod*, 168.192..."></li> <li><input type="checkbox" checked> /var/log/apache2/access.log</li> </td> </tr></tbody></table> </li> </ul> </div> </div> </div> <div class="col-md-2"> <div class="input-group"> <input type="text" class="form-control" value="* > access"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button> <ul id="the-menu" class="dropdown-menu pull-right" style="padding: 8px 12px 8px 12px"> <li> <table><tbody> <tr valign="top"> <td> <li>HOST <span class="hint">(empty or * for all)</span></li> <li><input style="width:100%; padding: 4px" type="text" name="filter" value="*" placeholder="prod*, 168.192..."></li> <li><input type="checkbox" checked> backend1 (54.198.200.41)</li> <li><input type="checkbox" checked> backend2 (54.198.200.41)</li> <li><input type="checkbox" checked> backend3 (54.198.200.41)</li> <li><input type="checkbox" checked> backend4 (54.198.200.41)</li> <li><input type="checkbox" checked> backend5 (54.198.200.41)</li> <li style="text-align: right"><a href="#all">+ more hosts...</a></li> </td> <td>  </td> <td> <li>LOG <span class="hint">(empty or * for all)</span></li> <li><input style="width:100%; padding: 4px" type="text" name="filter" value="access" placeholder="prod*, 168.192..."></li> <li><input type="checkbox" checked> /var/log/apache2/access.log</li> </td> </tr></tbody></table> </li> </ul> </div> </div> </div> <div class="col-md-2"> <div class="input-group"> <input type="text" class="form-control" value="* > access"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button> <ul id="the-menu" class="dropdown-menu pull-right" style="padding: 8px 12px 8px 12px"> <li> <table><tbody> <tr valign="top"> <td> <li>HOST <span class="hint">(empty or * for all)</span></li> <li><input style="width:100%; padding: 4px" type="text" name="filter" value="*" placeholder="prod*, 168.192..."></li> <li><input type="checkbox" checked> backend1 (54.198.200.41)</li> <li><input type="checkbox" checked> backend2 (54.198.200.41)</li> <li><input type="checkbox" checked> backend3 (54.198.200.41)</li> <li><input type="checkbox" checked> backend4 (54.198.200.41)</li> <li><input type="checkbox" checked> backend5 (54.198.200.41)</li> <li style="text-align: right"><a href="#all">+ more hosts...</a></li> </td> <td>  </td> <td> <li>LOG <span class="hint">(empty or * for all)</span></li> <li><input style="width:100%; padding: 4px" type="text" name="filter" value="access" placeholder="prod*, 168.192..."></li> <li><input type="checkbox" checked> /var/log/apache2/access.log</li> </td> </tr></tbody></table> </li> </ul> </div> </div> </div> </div> </div> </div>

body{ margin-top:20px; } * { font-family: verdana; font-size: 10px; } .menu-input { padding: 0px 8px; } .hint { color: #ccc; font-size: 9px; font-style: italic; }

$(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); }); $('#the-menu').click(function (e) { e.stopPropagation(); }); });