energylink/public/app/core/components/search/search.html

<div class="search-backdrop" ng-if="ctrl.isOpen"></div>

<div class="search-container" ng-if="ctrl.isOpen">

	<div class="search-field-wrapper">
		<div class="search-field-icon pointer" ng-click="ctrl.closeSearch()"><i class="fa fa-search"></i></div>

		<input type="text" placeholder="Find dashboards by name" give-focus="ctrl.giveSearchFocus" tabindex="1"
						ng-keydown="ctrl.keyDown($event)"
						ng-model="ctrl.query.query"
						ng-model-options="{ debounce: 500 }"
						spellcheck='false'
						ng-change="ctrl.search()"
						ng-blur="ctrl.searchInputBlur()"
						/>

		<div class="search-field-spacer"></div>
	</div>

	<div class="search-dropdown">
    <div class="search-dropdown__col_1">
      <div class="search-results-container" grafana-scrollbar>
        <h6 ng-show="!ctrl.isLoading && results.length">No dashboards matching your query were found.</h6>

        <div ng-repeat="section in ctrl.results" class="search-section">
          <a class="search-section__header pointer" ng-hide="section.hideHeader" ng-click="ctrl.toggleFolder(section)">
            <i class="search-section__header__icon" ng-class="section.icon"></i>
            <span class="search-section__header__text">{{::section.title}}</span>
            <i class="fa fa-minus search-section__header__toggle" ng-show="section.expanded"></i>
            <i class="fa fa-plus search-section__header__toggle" ng-hide="section.expanded"></i>
          </a>

          <div ng-if="section.expanded">
            <a ng-repeat="item in section.items" class="search-item" ng-class="{'selected': item.selected}" ng-href="{{::item.url}}">
              <span class="search-item__icon">
                <i class="fa fa-th-large"></i>
              </span>
              <span class="search-item__body">
                <div class="search-item__body-title">{{::item.title}}</div>
                <div class="search-item__body-sub-title" ng-show="item.folderTitle && section.hideHeader">
                  {{::item.folderTitle}}
                </div>
              </span>
              <span class="search-item__tags">
                <span ng-click="ctrl.filterByTag(tag, $event)" ng-repeat="tag in item.tags" tag-color-from-name="tag" class="label label-tag">
                  {{tag}}
                </span>
              </span>
            </a>
          </div>
        </div>
      </div>
    </div>

    <div class="search-dropdown__col_2">
      <div class="search-filter-box">
        <div class="search-filter-box__header">
          <i class="fa fa-filter"></i>
          Filter by:
          <a class="pointer pull-right small">
            <i class="fa fa-remove"></i> Clear
          </a>
        </div>

        <div class="gf-form">
          <folder-picker initial-title="ctrl.initialFolderFilterTitle"
                         on-change="ctrl.onFolderChange($folder)"
                         label-class="width-4">
          </folder-picker>
        </div>

        <div class="gf-form">
          <label class="gf-form-label width-4">Tags</label>
          <bootstrap-tagsinput ng-model="ctrl.dashboard.tags" tagclass="label label-tag" placeholder="add tags">
          </bootstrap-tagsinput>
        </div>
      </div>

      <div class="search-filter-box">
        <a class="search-button-row-explore-link" target="_blank" href="https://grafana.com/dashboards?utm_source=grafana_search">
          <img src="public/img/icn-dashboard-tiny.svg" width="20" /> Find  dashboards on Grafana.com
        </a>
      </div>
    </div>
  </div>
</div>