X
    Categories: AngularjsIonic

Ionic alpha scroll with filter search

Ionic alpha scroll with filter search

Ionic alpha scroll with filter search, I am using Ionic and angularjs for my application, I have used ion-alpha-scroll package to group by my products in alphabetical order. Its working fine to list out product in alphabetical order and in right side it will show alphabets by clicking alphabet it will go to the product with the start of selected alphabet. But In my case I want to make search filter for my products.

I am using default $ionicFilterBar to filter my products. When I search products, $ionicFilterBar update function gives filtered results but its not binding in my ion-alpha-scroll package. I cannot refresh ion-alpha-scroll because I have checkbox for my products, So If I refresh the selected check boxes become false.

So after some research have implemented custom Ionic alpha scroll with search filter :

First Step

Store Items in variable in controller :

$scope.items =  [{
              name: "A Item",
              subtitle: "Item Subtitle",
              checked: false
          }, {
              name: "A Item",
              subtitle: "Item Subtitle",
              checked: false
          }, {
              name: "B Item",
              subtitle: "Item Subtitle",
              checked: false
          }, {
              name: "C Item",
              subtitle: "Item Subtitle",
              checked: false
          }, {
              name: "D Item",
              subtitle: "Item Subtitle",
              checked: false
          }, {
              name: "A Item",
              subtitle: "Item Subtitle",
              checked: false
          }, {
              name: "E Item",
              subtitle: "Item Subtitle",
              checked: false
          }, {
              name: "G Item",
              subtitle: "Item Subtitle",
              checked: false
          }, {
              name: "H Item",
              subtitle: "Item Subtitle",
              checked: false
          }, {
              name: "I Item",
              subtitle: "Item Subtitle",
              checked: false
          }, {
              name: "J Item",
              subtitle: "Item Subtitle",
              checked: false
          }, {
              name: "K Item",
              subtitle: "Item Subtitle",
              checked: false
          }, {
              name: "L Item",
              subtitle: "Item Subtitle",
              checked: false
          }, {
              name: "M Item",
              subtitle: "Item Subtitle",
              checked: false
          }, {
              name: "N Item",
              subtitle: "Item Subtitle",
              checked: false
          }, {
              name: "O Item",
              subtitle: "Item Subtitle",
              checked: false
          }, {
              name: "P Item",
              subtitle: "Item Subtitle",
              checked: false
          }, {
              name: "Q Item",
              subtitle: "Item Subtitle",
              checked: false
          }, {
              name: "R Item",
              subtitle: "Item Subtitle",
              checked: false
          }, {
              name: "S Item",
              subtitle: "Item Subtitle",
              checked: false
          }, {
              name: "T Item",
              subtitle: "Item Subtitle",
              checked: false
          }, {
              name: "U Item",
              subtitle: "Item Subtitle",
              checked: false
          }, {
              name: "V Item",
              subtitle: "Item Subtitle",
              checked: false
          }, {
              name: "W Item",
              subtitle: "Item Subtitle",
              checked: false
          }, {
              name: "X Item",
              subtitle: "Item Subtitle",
              checked: false
          }, {
              name: "Y Item",
              subtitle: "Item Subtitle",
              checked: false
          }, {
              name: "Z Item",
              subtitle: "Item Subtitle",
              checked: false
          }, {
              name: "R Item",
              subtitle: "Item Subtitle",
              checked: false
      }];

Step 2 : Write Default $ionicFilterBar  function in controller


$scope.showFilterBar = function() {
        filterBarInstance = $ionicFilterBar.show({
            items: $scope.items,
            update: function(filteredItems, filterText) {
                $scope.items = filteredItems;
                $scope.$apply();
                console.log(filterText);
                console.log(" Filtered Items ");
                console.log($scope.items);
                if (filterText) {
                    console.log(filterText);
                }
            }
        });
    };

Step 3 : Inject the below providers in your controller

$scope, $state, $ionicFilterBar, $ionicScrollDelegate, $ionicSideMenuDelegate, $location

Step 3 : Write function to get Alphabets in controller

$scope.alphabet = iterateAlphabet();
//Create alphabet object
  function iterateAlphabet()
  {
     var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
     var numbers = new Array();
     for(var i=0; i<str.length; i++)
     {
        var nextChar = str.charAt(i);
        numbers.push(nextChar);
     }
     return numbers;
  }

Step 4  : Write groupBy filter in controller

To implement this please call underscore-min.js in index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
.filter('groupBy', function() {
    return _.memoize(function(items, field) {
            return _.groupBy(items, field);
        }
    );
})

Step 5 : Call Items in your index.html

My html

<ion-header-bar align-title="center" class="bar-positive">
    <h1 class="title title-left " >Search item</h1>
    <div class="buttons" side="right">
      <button class="button button-icon button-clear ion-ios-search-strong header-search-box" style="margin-right:15px;" ng-click="showFilterBar()">
        </button>
      <button class="button button-icon button-clear ion-ios-bell">
        </button>
    </div>
  </ion-header-bar>

<ion-content scrollbar-x="false"   scrollbar-y="false" ng-class="{showFooter:has-footer}">
  <div ng-repeat="(letter, medicines) in items | groupBy:'name' " class="ion_alpha_list">
    <ion-item class="item item-divider ng-binding" id="index_{{ letter | limitTo :  1 }}">{{ letter | limitTo :  1 }}</ion-item>
    <!-- ngRepeat: item in items -->
    <ion-item ng-repeat="item in medicines" class="item">
      <div class="item-checkbox">
        <label class="checkbox">
          <input type="checkbox"  
                      ng-model="item.checked" 
                      ng-checked="item.checked"
                      ng-change="changeCheckbox(item.checked)">
          </label>
          <h2>{{item.name}}</h2>
          <p style="color: #b4b4b4; font-size: 14px;" class="ng-binding">Cipla Pharma</p>
        </div>
      </ion-item>
    </div>
</ion-content>
  <ul class="ion_alpha_sidebar">
    <li ng-click="gotoList('index_{{letter}}')"ng-repeat="letter in alphabet"> 
         {{letter}}
    </li>
  </ul>

Step 6 : Write gotoList function in your controller, Which will take the user to on click particular index.

 //Click letter event
  $scope.gotoList = function(id){
    $location.hash(id);
    $ionicScrollDelegate.anchorScroll();
  }

Ionic alpha scroll Output :

When user press “D” from right alphabet order :

When user try filter by entering text

Thanks for reading this article.
Hope it will help some one.

Marimuthu: