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>