patternfly/tests/pages/search.html

This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.

---
categories: [Widgets]
layout: page
title: Search
resource: true
---
      <form role="form" class="search-pf has-button">
        <div class="form-group has-clear">
          <div class="search-pf-input-group">
            <label for="search1" class="sr-only">Search</label>
            <input id="search1" type="search" class="form-control" placeholder="Search">
            <button type="button" class="clear" aria-hidden="true"><span class="pficon pficon-close"></span></button>
          </div>
        </div>
        <div class="form-group">
          <button class="btn btn-default" type="submit"><span class="fa fa-search"></span></button>
        </div>
      </form>
      <h2>Pre-populated</h2>
      <form role="form" class="search-pf has-button">
        <div class="form-group has-clear">
          <div class="search-pf-input-group">
            <label for="search2" class="sr-only">Search</label>
            <input id="search2" type="search" class="form-control" placeholder="Search" value="Search term">
            <button type="button" class="clear" aria-hidden="true"><span class="pficon pficon-close"></span></button>
          </div>
        </div>
        <div class="form-group">
          <button class="btn btn-default" type="submit"><span class="fa fa-search"></span></button>
        </div>
      </form>
      <h2>Without Button</h2>
      <form role="form" class="search-pf">
        <div class="form-group has-clear">
          <div class="search-pf-input-group">
            <label for="search3" class="sr-only">Search</label>
            <input id="search3" 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>
      <h2>Without Clear</h2>
      <form role="form" class="search-pf has-button">
        <div class="form-group">
          <div class="search-pf-input-group">
            <label for="search4" class="sr-only">Search</label>
            <input id="search4" type="search" class="form-control" placeholder="Search">
          </div>
        </div>
        <div class="form-group">
          <button class="btn btn-default" type="submit"><span class="fa fa-search"></span></button>
        </div>
      </form>
      <h2>Sizes</h2>
      <form role="form" class="search-pf has-button">
        <div class="form-group has-clear">
          <div class="search-pf-input-group">
            <label for="search-lg" class="sr-only">Search</label>
            <input id="search-lg" type="search" class="form-control input-lg" placeholder="Search">
            <button type="button" class="clear" aria-hidden="true"><span class="pficon pficon-close"></span></button>
          </div>
        </div>
        <div class="form-group">
          <button class="btn btn-default btn-lg" type="submit"><span class="fa fa-search"></span></button>
        </div>
      </form>
      <br />
      <form role="form" class="search-pf has-button">
        <div class="form-group has-clear">
          <div class="search-pf-input-group">
            <label for="search5" class="sr-only">Search</label>
            <input id="search5" type="search" class="form-control" placeholder="Search">
            <button type="button" class="clear" aria-hidden="true"><span class="pficon pficon-close"></span></button>
          </div>
        </div>
        <div class="form-group">
          <button class="btn btn-default" type="submit"><span class="fa fa-search"></span></button>
        </div>
      </form>
      <br />
      <form role="form" class="search-pf has-button">
        <div class="form-group has-clear">
          <div class="search-pf-input-group">
            <label for="search-sm" class="sr-only">Search</label>
            <input id="search-sm" type="search" class="form-control input-sm" placeholder="Search">
            <button type="button" class="clear" aria-hidden="true"><span class="pficon pficon-close"></span></button>
          </div>
        </div>
        <div class="form-group">
          <button class="btn btn-default btn-sm" type="submit"><span class="fa fa-search"></span></button>
        </div>
      </form>
      <h2>Within the grid</h2>
      <div class="row">
        <div class="col-md-6">
          <form role="form" class="search-pf has-button">
            <div class="form-group has-clear">
              <div class="search-pf-input-group">
                <label for="search6" class="sr-only">Search</label>
                <input id="search6" type="search" class="form-control" placeholder="Search">
                <button type="button" class="clear" aria-hidden="true"><span class="pficon pficon-close"></span></button>
              </div>
            </div>
            <div class="form-group">
              <button class="btn btn-default" type="submit"><span class="fa fa-search"></span></button>
            </div>
          </form>
        </div>
      </div>
      <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>