How To Add A Search Bar In The Header On Ionic

Almost every popular mobile app has a search icon in the header and when you click on it, a search bar slides in and allows you to filter the content on the view. Ionic doesn't have a built-in component for that at the moment, but do not despair, there is a plugin for that!

This plugin was created by Devin Jett. Have a look at his demo that also shows the differences in layout for iOS and Android.

For this tutorial I took the code from my How To Group Items In Ionic's Collection-Repeat tutorial to start with. It already displays a list of items with a search box on the top. I will replace that search box with the search box in the header.

Use Bower to install the ionic-filter-bar plugin:

bower install ionic-filter-bar

Next, let's reference the JS and CSS files in index.html. Make sure you include the files after you include the Ionic files.

<!-- include after ionic.css and ionic.bundle.js -->
<link href="lib/ionic-filter-bar/dist/ionic.filter.bar.min.css" rel="stylesheet">
<script src="lib/ionic-filter-bar/dist/ionic.filter.bar.min.js"></script>

Modify app.js to add the module dependency jett.ionic.filter.bar.

angular.module('starter', ['ionic', 'jett.ionic.filter.bar'])

Ok, so now we are ready to implement the code that will display the search bar. Let's start with the controller. I already had the ItemController that generates items to display. We need to inject the $ionicFilterBar into the controller and then we'll add the a function showFilterBar to display the search bar.

angular.module('starter')
		   .controller('ItemController', ['$ionicFilterBar', ItemController])

function ItemController($ionicFilterBar) {
	var vm = this,
		items = [],
        filterBarInstance;

	for (var i = 1; i <= 1000; i++) {
		var itemDate = moment().add(i, 'days');

		var item = {
			description: 'Description for item ' + i,
			date: itemDate.toDate()
		};
		items.push(item);
	}

	vm.items = items;

	vm.showFilterBar = function () {
	  filterBarInstance = $ionicFilterBar.show({
		items: vm.items,
		update: function (filteredItems) {
		  vm.items = filteredItems;
		},
		filterProperties: 'description'
	  });
	};

	return vm;
}

The most important thing to note here is that you define the names of the properties that need to be filtered. I wanted to filter on the description so I defined that in the filterProperties. You can also set it to an array of properties to filter on.

Now we just need to add a search button in the header of the app that will call the showFilterBar function.

<ion-pane ng-controller="ItemController as vm">
  <ion-header-bar class="bar-positive">
	<h1 class="title">Group By Month & Year</h1>
	<div class="buttons">
		<button class="button button-icon ion-android-search"
        		ng-click="vm.showFilterBar()"></button>
	</div>
  </ion-header-bar>
  <ion-content class="has-header">
	<ion-list>
	  <div collection-repeat="item in vm.items | groupByMonthYear" divider-collection-repeat>
		  <ion-item>
			<div>{{ item.description }}</div>
			<div>{{ item.date | date:'dd-MM-yyyy' }}</div>
		  </ion-item>
	  </div>
	</ion-list>
  </ion-content>
</ion-pane>

I really like this plugin: it's easy to use, the default styles per platform look great and everything is customizable. For a full explanation of the configuration options, have a look at the documentation and the demo app code on GitHub.