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.

Follow me on Twitter @ashteya and sign up for my weekly emails to get new tutorials.

If you found this article useful, could you hit the share buttons so that others can benefit from it, too? Thanks!

comments powered by Disqus