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 thebb-search-input
component responsive on small screens. You include this directive as an attribute with no value on the container for thebb-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 optionalsearchText
as an argument, then the text in the input is updated. If the event does not includesearchText
, 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);
})();