Find

The find pattern is used to locate objects in a large dataset by entering a query. Unlike filter, find does not remove non-matching objects from view so it can be used to sift through a large dataset without losing the context provided by other displayed items. Find is displayed as a component of the Data Toolbar.

Find should not be used in the following cases:

  • Paging is used and find cannot work across all pages.
  • Infinite scrolling is used and find cannot work across the entire data set.

Jump to Find in a List View, Find in a Table View or Find in a Card View

Find in a List View

Simple Find List callout

Find in a Table View

Simple Find Table callout

Find in a Card View

Simple Find Card callout

Find Field

Find Field callout
  1. Trigger Button: Clicking on the button triggers the entire find tool to drop down.
  2. Text Entry Field: The user’s query is entered here. When possible, results should be updated as the user types, or after they press the enter key.
  3. Position and Results Count: The first number shows the position of the currently focused result. The second number shows the total number of matching objects.
  4. Previous and Next Result: These buttons change focus to the previous or next result.
  5. Close: Dismisses the find drop down and clears all shaded results.

Find Results

Find Results callout
  1. Found Objects: All objects that match the user’s query are shaded to differentiate them from non-matching objects.
  2. Focused Object: The first matching object is brought into view by scrolling or paging and highlighted. When the focus is changed via the previous/next buttons, the view should change, if necessary, to display the newly focused object.

Example

1 of 3
40 Results

Active filters:

  • Name: nameofthething
  • Name: nameofthething
  • Name: nameofthething

Clear All Filters

Reference Markup

      <div class="container-fluid">
        <div class="row toolbar-pf">
          <div class="col-sm-12">
            <form class="toolbar-pf-actions">
              <div class="form-group toolbar-pf-filter">
                <label class="sr-only" for="filter">Name</label>
                <div class="input-group">
                  <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                      <li class="selected"><a href="#">Name</a></li>
                      <li><a href="#">Type</a></li>
                      <li><a href="#">Color</a></li>
                    </ul>
                  </div><!-- /btn-group -->
                  <input type="text" class="form-control" id="filter" placeholder="Filter By Name...">
                </div><!-- /input-group -->
              </div>
              <div class="form-group">
                <div class="dropdown btn-group">
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
                  <ul class="dropdown-menu">
                    <li class="selected"><a href="#">Name</a></li>
                    <li><a href="#">Type</a></li>
                    <li><a href="#">Last Modified</a></li>
                  </ul>
                </div>
                <button class="btn btn-link" type="button">
                  <span class="fa fa-sort-alpha-asc"></span>
                </button>
              </div>
              <div class="form-group">
                <button class="btn btn-default" type="button">Action</button>
                <button class="btn btn-default" type="button">Action</button>
                <div class="dropdown btn-group  dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebab" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu " aria-labelledby="dropdownKebab">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

              </div>
              <div class="toolbar-pf-action-right">
                <div class="form-group toolbar-pf-find">
                  <button class="btn btn-link btn-find" type="button">
                    <span class="fa fa-search"></span>
                  </button>
                  <div class="find-pf-dropdown-container">
                    <input type="text" class="form-control" id="find" placeholder="Find By Keyword...">
                    <div class="find-pf-buttons">
                      <span class="find-pf-nums">1 of 3</span>
                      <button class="btn btn-link" type="button">
                        <span class="fa fa-angle-up"></span>
                      </button>
                      <button class="btn btn-link" type="button">
                        <span class="fa fa-angle-down"></span>
                      </button>
                      <button class="btn btn-link btn-find-close" type="button">
                        <span class="pficon pficon-close"></span>
                      </button>
                    </div>
                  </div>
                </div>
                <div class="form-group toolbar-pf-view-selector">
                  <button class="btn btn-link "><i class="fa fa-th"></i></button>
                  <button class="btn btn-link "><i class="fa fa-th-large"></i></button>
                  <button class="btn btn-link "><i class="fa fa-th-list"></i></button>
                </div>
              </div>
            </form>
            <div class="row toolbar-pf-results">
              <div class="col-sm-12">
                <h5>40 Results</h5>
                <p>Active filters:</p>
                <ul class="list-inline">
                  <li>
                    <span class="label label-info">
                      Name: nameofthething
                      <a href="#"><span class="pficon pficon-close"></span></a>
                    </span>
                  </li>
                  <li>
                    <span class="label label-info">
                      Name: nameofthething
                      <a href="#"><span class="pficon pficon-close"></span></a>
                    </span>
                  </li>
                  <li>
                    <span class="label label-info">
                      Name: nameofthething
                      <a href="#"><span class="pficon pficon-close"></span></a>
                    </span>
                  </li>
                </ul>
                <p><a href="#">Clear All Filters</a></p>
              </div><!-- /col -->
            </div><!-- /row -->
          </div><!-- /col -->
        </div><!-- /row -->
      </div><!-- /container -->

      <script>
        (function($) {
          $(document).ready(function() {
            // Upon clicking the find button, show the find dropdown content
            $(".btn-find").click(function () {
              $(this).parent().find(".find-pf-dropdown-container").toggle();
            });
            // Upon clicking the find close button, hide the find dropdown content
            $(".btn-find-close").click(function () {
              $(".find-pf-dropdown-container").hide();
            });
          });
        })(jQuery);
      </script>