guhcampos
7/15/2016 - 4:53 PM
Pattern Fly Search Widget does not play well with the Toolbar
Pattern Fly Search Widget does not play well with the Toolbar
<!DOCTYPE html>
<base href="/">
<!--[if IE 9]><html lang="en-us" class="ie9 layout-pf"><![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en-us" class="layout-pf">
<!--<![endif]--><head>
<title>
Pattern Fly Toolbar + Search
</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.6.0/css/patternfly.css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.6.0/css/patternfly-additions.css">
<script src="/static/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.6.0/js/patternfly.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
</head>
<body>
<div class="row toolbar-pf" style="border: none; padding-bottom: 10px;">
<div class="col-sm-12">
<form role="form" class="search-pf has-button">
<div class="form-group has-clear">
<div class="search-pf-input-group">
<label for="user-search" class="sr-only">Search</label>
<input id="user-search" type="search" class="form-control" placeholder="Search">
<button type="button" class="clear" aria-hidden="true"><span class="pficon pficon-close"></span></button>
</div>
</div>
</form>
<div class="form-group">
<button class="btn btn-default" type="button"><span class="fa fa-search"></span></button>
</div>
</form>
<script>
(function($) {
$(document).ready(function() {
// Hide the clear button if the search input is empty
$(".search-pf .has-clear .clear").each(function() {
if (!$(this).prev('.form-control').val()) {
$(this).hide();
}
});
// Show the clear button upon entering text in the search input
$(".search-pf .has-clear .form-control").keyup(function () {
var t = $(this);
t.next('button').toggle(Boolean(t.val()));
});
// Upon clicking the clear button, empty the entered text and hide the clear button
$(".search-pf .has-clear .clear").click(function () {
$(this).prev('.form-control').val('').focus();
$(this).hide();
});
});
})(jQuery);
</script>