Using search feature in Ionic framework

Question

I am a UI person and very new to ionic framework.. I wanted to add search feature in my android app built using Ionic framework. After a research i found that I will need to use this plugin https://github.com/djett41/ionic-filter-bar. but there is no detail documentation available. Can anyone please guide how to use this plugin working. I have made all setup but stuck with actual code.

Answer 1

Ionic uses Angular, and Angular include an atributte filter very useful. Look this: https://docs.angularjs.org/api/ng/filter/filter and the example there. Regards

Answer 2

First of all you must install the plugin. You can use bower for that:

bower install ionic-filter-bar --save

and it will copy all the javascript and css needed in the lib folder inside www.

Then you must add the references to the css to your index.html:

<link href="lib/ionic-filter-bar/dist/ionic.filter.bar.css" rel="stylesheet">

same thing for the javascript:

<script src="lib/ionic-filter-bar/dist/ionic.filter.bar.js"></script>

You have to inject the module jett.ionic.filter.bar you your main module:

var app = angular.module('app', [
        'ionic',
        'jett.ionic.filter.bar'
    ]);

and you must reference the service $ionicFilterBar in your controller:

angular.module('app')
        .controller('home', function($scope, $ionicFilterBar){

    });

Now you can start using it.

In my sample I want to trigger the search-box when the user clicks/taps on a icon in the header. I would add this HTML to the view:

  <ion-nav-buttons side="secondary">
    <button class="button button-icon icon ion-ios-search-strong" ng-click="showFilterBar()">
    </button>
  </ion-nav-buttons>

The action trigger an event in my controller showFilterBar:

  $scope.showFilterBar = function () {
    var filterBarInstance = $ionicFilterBar.show({
      cancelText: "<i class='ion-ios-close-outline'></i>",
      items: $scope.places,
      update: function (filteredItems, filterText) {
        $scope.places = filteredItems;
      }
    });
  };

which creates the $ionicFilterBar and shows it.

As you can see here I am using an array of objects $scope.places

$scope.places = [{name:'New York'}, {name: 'London'}, {name: 'Milan'}, {name:'Paris'}];

which I have linked to the items member of my $ionicFilterBar. The update method will give me in filteredItems the items (places) filtered.

You can play with this plunker.

Another option is to use the plugin to actually fetch some data remotely through $http.

If we want to achieve this we can use the update function again. Now we don't need to bind the items to our array of objects cause we won't need the filtered elements.

We will use the filterText to perform some action:

  $scope.showFilterBar = function () {
    var filterBarInstance = $ionicFilterBar.show({
      cancelText: "<i class='ion-ios-close-outline'></i>",
      // items: $scope.places,
      update: function (filteredItems, filterText) {
        if (filterText) {
            console.log(filterText);
            $scope.fetchPlaces(filterText);
        }
      }
    });
  };

We will call another function which will, maybe, call $http and return some data which we can bind to our array of objects:

 $scope.fetchPlaces = function(searchText)
  {
    $scope.places = <result of $http call>;
  }

Another plunker here.

PS:

If you want to configure it using some sort of customization you must do it in your configuration using the provider $ionicFilterBarConfigProvider:

angular.module('app')
    .config(function($ionicFilterBarConfigProvider){
        $ionicFilterBarConfigProvider.clear('ion-ios-close-empty');
    })

PPS:

In my plunker I've included the css and the script directly copying it from the source.

UPDATE:

Someone asked not to replace the list with the updated one. My cheap and dirty solution is to check if the filterText contains some values. If it's empty (no searches) we go throught each element an set a property found = false otherwise we compare the places array we the filteredItems array. Matching elements will be marked as found.

  function allNotFound(filteredItems) {
    angular.forEach($scope.places, function(item){
      item.found = false;
    });
  }

  function matchingItems(filteredItems) {
    angular.forEach($scope.places, function(item){
        var found = $filter('filter')(filteredItems, {name: item.name});
        if (found && found.length > 0) {
            console.log('found', item.name);
            item.found = true;
        } else {
          item.found = false;
          console.log('not found', item.name);
        }
    });

and now we can integrate the filter bar this way:

 $scope.showFilterBar = function () {
    var filterBarInstance = $ionicFilterBar.show({
      cancelText: "<i class='ion-ios-close-outline'></i>",
      items: $scope.places,
      update: function (filteredItems, filterText) {
          if (!filterText) {
              allNotFound();
          } else {
            matchingItems(filteredItems);
          }
      }
    });
  };

We can use the found attribute of the object to change the style of the element.

As always, a Plunker to show how it works.