SodhanaLibrary

This examples is about filtering user by places. Here tag search implemented with auto complete feature by Angular Material UI

Click here to see DEMO  Download Code

Lets implement step by step

JSON Data

This is user information in JSON format

$scope.userData = [{
        "id": "1",
        "name": "Srinivas Dasari",
        "place": "Chennai",
        "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhA5fOz8ZjFn7zXs1kFKXFeTFqMWzyFxubauOtoNHj2GriikheNZrygwTISEcZI5UixSPlLEMvQPeAODkVHq2YhxDNI4pUGUTOXxjkWsMJgGI6J4g1c7Wnclcr2Fr-6Mid2fXRm3hi95Q/s160-Ic42/srinivas_dasari.jpg"
      }, {
        "id": "2",
        "name": "Srinivas Tamada",
        "place": "Atlanta",
        "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnm-TqpEDLGKsrSJTxXx-bSEQ7DRurhyphenhyphenCQhxhFxXyPpk_59S37ota4-Nvs2jhWdtm3z4aVu7XxKDDZ9K8lQQ83AuUgOGVr3TSkDlmukJvGDTB7MY1kV2S7VDuKUoUaJQeuB6JKcz7P2bk/s160-Ic42/srinivas_tamada.jpg"
      }, {
        "id": "3",
        "name": "Sri Harsha",
        "place": "Hyderabad",
        "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK64KLM_dEvzKgVmPuCjyJQ-3Bduqq2LCftBUyQaJ79su8ZAj3yd6NHDd32Bn3zfrsOL9Xdb-5H4_aQDacTf3aqI6-8_gJiXbxtTGeroOtocuBFw0aiUltM-kaiz3zaUIxl6s_0VQaVOc/s160-Ic42/harsha.jpg"
      }, {
        "id": "4",
        "name": "Lokesh Raghuram",
        "place": "London",
        "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxBVfYEdbm3hJyS7HFmjroVAG_qu_B4XR95F1uppfCqlxqLs4li4fHGz6nBWAOFqwAE5GeuJMu2UvXbCvaTS8zFoyMVqGqQTnfznNK89n1xdSCzy7ae7TCOApNiPZVTUG5mr5gVEUPW4o/s160-Ic42/lokesh.jpg"
      }, {
        "id": "5",
        "name": "Bala Ganesh",
        "place": "Chennai",
        "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjucYVyqDQD7sKpL4KEu5OkSP5uGGJ-0urrw7lNoh04H_doBcVoxE-lZn8kQaj8xmPNA8unWAFkZBUwh4FKxuEdrGx_HdZ6MH5n0liXHt-OEH8p8QB0pU85YNtab8bOrOhBBQALLqcfPno/s160-Ic42/ganesh.jpg"
      }, {
        "id": "6",
        "name": "Arun kumar",
        "place": "Visakhapatnam",
        "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmIfGtxOwF4nXD5dOucio65HC859BhKNvxdS0FPQwdjT8wL3iw5Ch1jWNPwliE4TaTORJdfwdA1VYhOTlvHlSTrsFn5Qb10qXzztcFZK9ABQ7Gq0CFY7OLpkjByFWOpKVlE6D5WVOcE6k/s160-Ic42/arun.jpg"
      }];

Tags Material UI

1. selectedUsers - it will contain list of tags
2. selectedItem - it is selected item from auto complete
3. searchText - user entered search text
4. querySearch(searchText) - filters user data
5. transformChip($chip) - convert user data to tags

<md-chips ng-model="selectedUsers" md-autocomplete-snap
         md-transform-chip="transformChip($chip)" class="chipsDiv">
  <md-autocomplete
      md-selected-item="selectedItem"
      md-search-text="searchText"
      md-items="user in querySearch(searchText)"
      md-item-text="user.name"
      placeholder="Search for a user">
    <span md-highlight-text="searchText">{{user.place}}</span>
  </md-autocomplete>
  <md-chip-template>
    <span>
      <strong>{{$chip}}</strong>
    </span>
  </md-chip-template>
</md-chips>

Filter User Data

selectedTags - Custom filter to filter user data

<md-card style="width: 100%;height: 144px;" ng-repeat="user in userData | selectedTags:selectedUsers">
  <md-card-title>
    <md-card-title-text>
      <span class="md-headline">{{user.name}}</span><br>
      <span class="md-subhead">{{user.place}}</span>
    </md-card-title-text>
    <md-card-title-media>
      <div class="md-media-md card-media">
       <img src="{{user.pic}}"/>
      </div>
    </md-card-title-media>
  </md-card-title>
</md-card>

AngularJS Code

Find below for AngularJS code

angular.module('MyApp', ['ngMaterial', 'ngMessages'])
.controller('AppCtrl', function($scope, $mdSidenav) {
    
    // User Information
    $scope.userData = [{
        "id": "1",
        "name": "Srinivas Dasari",
        "place": "Chennai",
        "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhA5fOz8ZjFn7zXs1kFKXFeTFqMWzyFxubauOtoNHj2GriikheNZrygwTISEcZI5UixSPlLEMvQPeAODkVHq2YhxDNI4pUGUTOXxjkWsMJgGI6J4g1c7Wnclcr2Fr-6Mid2fXRm3hi95Q/s160-Ic42/srinivas_dasari.jpg"
      }, {
        "id": "2",
        "name": "Srinivas Tamada",
        "place": "Atlanta",
        "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnm-TqpEDLGKsrSJTxXx-bSEQ7DRurhyphenhyphenCQhxhFxXyPpk_59S37ota4-Nvs2jhWdtm3z4aVu7XxKDDZ9K8lQQ83AuUgOGVr3TSkDlmukJvGDTB7MY1kV2S7VDuKUoUaJQeuB6JKcz7P2bk/s160-Ic42/srinivas_tamada.jpg"
      }, {
        "id": "3",
        "name": "Sri Harsha",
        "place": "Hyderabad",
        "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK64KLM_dEvzKgVmPuCjyJQ-3Bduqq2LCftBUyQaJ79su8ZAj3yd6NHDd32Bn3zfrsOL9Xdb-5H4_aQDacTf3aqI6-8_gJiXbxtTGeroOtocuBFw0aiUltM-kaiz3zaUIxl6s_0VQaVOc/s160-Ic42/harsha.jpg"
      }, {
        "id": "4",
        "name": "Lokesh Raghuram",
        "place": "London",
        "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxBVfYEdbm3hJyS7HFmjroVAG_qu_B4XR95F1uppfCqlxqLs4li4fHGz6nBWAOFqwAE5GeuJMu2UvXbCvaTS8zFoyMVqGqQTnfznNK89n1xdSCzy7ae7TCOApNiPZVTUG5mr5gVEUPW4o/s160-Ic42/lokesh.jpg"
      }, {
        "id": "5",
        "name": "Bala Ganesh",
        "place": "Chennai",
        "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjucYVyqDQD7sKpL4KEu5OkSP5uGGJ-0urrw7lNoh04H_doBcVoxE-lZn8kQaj8xmPNA8unWAFkZBUwh4FKxuEdrGx_HdZ6MH5n0liXHt-OEH8p8QB0pU85YNtab8bOrOhBBQALLqcfPno/s160-Ic42/ganesh.jpg"
      }, {
        "id": "6",
        "name": "Arun kumar",
        "place": "Visakhapatnam",
        "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmIfGtxOwF4nXD5dOucio65HC859BhKNvxdS0FPQwdjT8wL3iw5Ch1jWNPwliE4TaTORJdfwdA1VYhOTlvHlSTrsFn5Qb10qXzztcFZK9ABQ7Gq0CFY7OLpkjByFWOpKVlE6D5WVOcE6k/s160-Ic42/arun.jpg"
      }];
    
    $scope.selectedUsers = [];
    
    // this method is for filtering places based on searchText
    $scope.querySearch = function(query) {
        var results = [];
        var places = [];
        query = query.toLowerCase();
        angular.forEach($scope.userData, function(user, key) {
            if(places.indexOf(user.place.toLowerCase()) == -1 && user.place.toLowerCase().indexOf(query) > -1) {
                results.push(user); 
                places.push(user.place.toLowerCase())
            }
        });
        return results;
    };
    
    // Display places as tags
    $scope.transformChip = function(chip) {
          return chip.place;
    };
}).filter('selectedTags', function() {
    return function(users, tags) {
        return users.filter(function(user) {
            if (tags.indexOf(user.place) != -1) {
                return true;
            } else if(tags.length == 0) {
                return true;
            }
            return false;

        });
    };
});