a blog for those who code

Saturday 2 April 2016

Adding Search Bar in the Header of Ionic App

In this post we will be discussing about adding a search bar in the header of Ionic App. Almost all the Mobile Application has the feature of searching and it always good to show the search bar on top i.e. on Header. So in this post we will show you how can you make use of the search functionality by adding it to the Header of your Ionic Application.

In our previous post we have discussed about How to Group Elements in Ionic Framework, we will be taking the code from there and modify the code to add the filter capabilities in our application. You should have Npm, Bower and Git installed in your system.

Next we will install ionic-filter-bar plugin which is a platform specific search filter plugin for the Ionic Framework (Only iOS / Android).You can install this plugin using command bower install ionic-filter-bar.


After that you need to add the references of JS and CSS in your index.html file as shown below :

<link href="../ionic-filter-bar/dist/ionic.filter.bar.min.css" rel="stylesheet">
<script src="../ionic-filter-bar/dist/ionic.filter.bar.min.js"></script>

And then you have to add jett.ionic.filter.bar dependency in angular.module() in app.js file as shown below :

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

Next we will change our controller to the below code where we are taking one more parameter ($ionicFilterBar) and then creating a function showFilterBar. In this we are updating the $scope.values based on the filteredItems passed. You also have one more property (filterProperties) which is used to define the names of the properties that need to be filtered.

.controller('repeaterCtrl', function ($scope, $ionicFilterBar) {
  $scope.values = window.Values.sort(function (a, b) {
    return a.first_name > b.first_name ? 1 : -1;
  });

  $scope.doRefresh = function () {
    $scope.values = window.Values;
    $scope.$broadcast('scroll.refreshComplete');
  }

  $scope.showFilterBar = function () {
    filterBar = $ionicFilterBar.show({
      items: $scope.values,
      update: function (filteredItems) {
        $scope.values = filteredItems
      }
      //filterProperties : 'first_name'
    });
  }
})

We will change our page1.html where we have added search button and on click of that button we are calling showFilterBar function.

<ion-view view-title="Search in Header">
 <ion-nav-buttons side="secondary">
  <button class="buttons button-icon ion-android-search" ng-click="showFilterBar()"></button>
 </ion-nav-buttons>
 <ion-content class="padding">
  <ion-refresher pulling-text="Update Date" on-refresh="doRefresh()"></ion-refresher>
  <ion-list>
   <ion-item collection-repeat="value in values | groupByLastName" divider-collection-repeat>
    <p>First Name : {{value.first_name}}</p>
    <p>Last Name : {{value.last_name}}</p>
   </ion-item>
  </ion-list>
 </ion-content>
</ion-view>

After running you will get the following output :


Please Like and Share the CodingDefined.com Blog, if you find it interesting and helpful.

1 comment: