Search

Return to Components

/* global angular */

(function () {
    'use strict';

items = [
            {
                title: 'Call Robert Hernandez',
                note: 'Robert recently gave a very generous gift. We should call to thank him.'
            },
            {
                title: 'Send invitation to ball',
                note: 'The Spring Ball is coming up soon. Let\'s get those invitations out!'
            },
            {
                title: 'Clean up desk',
                note: 'File and organize papers.'
            },
            {
                title: 'Investigate leads',
                note: 'Check out leads for important charity event funding.'
            },
            {
                title: 'Send thank you note',
                note: 'Send a thank you note to Timothy for his donation.'
            }
        ];

self.applySearchText = applySearchText;
        self.items = items;
    }

angular.module('stache')
        .controller('SearchTestController', SearchTestController);

})();

The search component creates a mobile-responsive input control for users to enter search criteria.

Search settings

bb-search-input — Creates an input control for users to enter search criteria. On mobile devices, the component displays a search button that users can click to display the input control.
- bb-on-search — Specifies a function to be called when users execute searches. The callback should have the following arguments:
  - searchText — Search text that has been applied.
- bb-on-search-text-changed — (Optional.) Specifies a function to be called when search text in the input changes. The callback should have the following arguments:
  - searchText — New search text in the search input.
- bb-search-text — (Optional.) Specifies search text that users can supply to the search component.
- bb-search-placeholder — (Optional.) Specifies placeholder text to display in the search input. If you include this attribute but do not specify a value, then the search input displays the default placeholder text "Find in this list."
- bb-search-mobile-response-enabled — (Optional.) Indicates whether to hide the text input and display a search button on mobile devices. (Default: true)
- bb-search-full-width — (Optional.) Indicates whether the search input should grow to its container's width. (Default: false)
- bb-search-input-id — (Optional.) Specifies an ID for the search input.
- bb-search-skip-button-while-tabbing — (Optional.) Indicates whether to skip over the search button when a user tabs through the search input. (Default: false)
bb-search-container — Makes the bb-search-input component responsive on small screens. You include this directive as an attribute with no value on the container for the bb-search-input component.

Search events

bbSearchInputApply — When the search input control receives this event, it applies search text as if a user clicked the search button. If the event includes the optional searchText as an argument, then the text in the input is updated. If the event does not include searchText, then the existing text in the input is applied.

Demo

Markup

<style type="text/css">
.bb-search-docs-toolbar-item {
   	display: inline-block;
    vertical-align: middle;
    margin-bottom: 0;
}
.bb-search-docs-toolbar {
    padding: 5px;
}
</style>
<div ng-controller="SearchTestController as searchCtrl">
    <div class="bb-search-docs-toolbar" bb-search-container>
        <div class="bb-search-docs-toolbar-item">
            <button type="button" ng-click="searchCtrl.applySearchText('Robert')" class="btn bb-btn-secondary">Predefined search text</button>  
        </div>
        <bb-search-input
            bb-search-text="searchCtrl.searchText"
            bb-on-search="searchCtrl.applySearchText(searchText)"
            bb-search-placeholder>
        </bb-search-input>
    </div>    
    <div>
        <bb-repeater bb-repeater-expand-mode="none">
            <bb-repeater-item ng-repeat="item in searchCtrl.items">
            <bb-repeater-item-title>
                {{item.title}}
            </bb-repeater-item-title>
            <bb-repeater-item-content>
                <div>
                {{item.note}}
                </div>
            </bb-repeater-item-content>
            </bb-repeater-item>
        </bb-repeater>
      </div>
</div>

JavaScript

/* global angular */

(function () {
    'use strict';

    function SearchTestController() {
        var self = this,
            items;
        
        function applySearchText(searchText) {
            var filteredItems = items;
            self.searchText = searchText;
            if (searchText) {
                filteredItems = items.filter(function (item) {
                    var property;
                    for (property in item) {
                        if (item.hasOwnProperty(property) && (property === 'title' || property === 'note')) {
                            if (item[property].indexOf(searchText) > -1) {
                                return true;
                            }
                        }
                    }
                    return false;
                });
            }
            self.items = filteredItems;
        }

        items = [
            {
                title: 'Call Robert Hernandez',
                note: 'Robert recently gave a very generous gift. We should call to thank him.'
            },
            {
                title: 'Send invitation to ball',
                note: 'The Spring Ball is coming up soon. Let\'s get those invitations out!'
            },
            {
                title: 'Clean up desk',
                note: 'File and organize papers.'
            },
            {
                title: 'Investigate leads',
                note: 'Check out leads for important charity event funding.'
            },
            {
                title: 'Send thank you note',
                note: 'Send a thank you note to Timothy for his donation.'
            }
        ];

        self.applySearchText = applySearchText;
        self.items = items;
    }

    angular.module('stache')
        .controller('SearchTestController', SearchTestController);

})();