awx/awx/ui/client/src/shared/smart-search/smart-search.partial.html

<div class="SmartSearch row">
    <!-- input -->
    <div class="SmartSearch-bar">
        <div class="SmartSearch-searchTermContainer">
            <!-- string search input -->
            <form name="smartSearch" class="SmartSearch-form" aw-enter-key="add(searchTerm)" novalidate>
                <input class="SmartSearch-input" ng-model="searchTerm" placeholder="Search">
            </form>
            <div type="submit" class="SmartSearch-searchButton" ng-disabled="!searchTerm" ng-click="add(searchTerm)">
                <i class="fa fa-search"></i>
            </div>
        </div>
        <div class="SmartSearch-keyToggle btn" ng-class="{'is-active': showKeyPane}" ng-click="toggleKeyPane()">
            Key
        </div>
    </div>
    <span ng-transclude="actions" class="List-actionHolder"></span>
    <!-- tags -->
    <div class="SmartSearch-tags">
        <div class="SmartSearch-tagSection">
            <div class="SmartSearch-flexContainer">
                <div class="SmartSearch-tagContainer" ng-repeat="tag in searchTags track by $index">
                    <div class="SmartSearch-deleteContainer" ng-click="remove($index)">
                        <i class="fa fa-times SmartSearch-tagDelete"></i>
                    </div>
                    <div class="SmartSearch-tag SmartSearch-tag--deletable">
                        <span class="SmartSearch-name">{{tag}}</span>
                    </div>
                </div>
                <a href class="SmartSearch-clearAll" ng-click="clearAll()" ng-show="!(searchTags | isEmpty)">CLEAR ALL</a>
            </div>
        </div>
    </div>
    <!-- hint key -->
    <div class="SmartSearch-keyPane row" ng-repeat="model in models" ng-show="showKeyPane">
        <div class="SmartSearch-keyPane--exitHolder">
            <button class="Form-exit SmartSearch-keyPane--exit" ng-click="toggleKeyPane()">
                <i class="fa fa-times-circle"></i>
            </button>
        </div>
        <div class="SmartSearch-keyRow SmartSearch-examples">
            <div class="SmartSearch-examples--title">
                <b>EXAMPLES:</b>
            </div>
            <div class="SmartSearch-examples--search">name:foo</div>
            <div class="SmartSearch-examples--search">organization.name:Default</div>
            <div class="SmartSearch-examples--search">id:>10</div>
        </div>
        <div class="SmartSearch-keyRow">
            <b>FIELDS:</b> <span ng-repeat="(key,value) in model.base">{{ key }}<span ng-if="!$last">, </span></span>
        </div>
        <div class="SmartSearch-keyRow">
            <b>RELATED FIELDS:</b> <span ng-repeat="relation in model.related">{{ relation }}<span ng-if="!$last">, </span></span>
        </div>
        <div class="SmartSearch-keyRow">
            <b>ADDITIONAL INFORMATION:</b> <span>For additional information on advanced search search syntax please see the Ansible Tower documentation.</span>
        </div>
    </div>
</div>