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.