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/" rel="stylesheet">  
<script src="lib/ionic-filter-bar/dist/"></script>  

Modify app.js to add the module dependency

angular.module('starter', ['ionic', ''])  

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.

           .controller('ItemController', ['$ionicFilterBar', ItemController])

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

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

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

    vm.items = items;

    vm.showFilterBar = function () {
      filterBarInstance = ${
        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" 
  <ion-content class="has-header">
      <div collection-repeat="item in vm.items | groupByMonthYear" divider-collection-repeat>
            <div>{{ item.description }}</div>
            <div>{{ | date:'dd-MM-yyyy' }}</div>

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.