vinaygopinath/index.html

## index.html
<!DOCTYPE html>
<html ng-app="CustomSearchDemo">
  <!-- Plunker: http://plnkr.co/edit/8qagvK -->
  <head>
    <link rel="stylesheet" href="style.css"/>
  </head>

  <body ng-controller="DemoCtrl">

  <div>
  <label>Search</label>
  <input type="text" ng-model="queryStr" ng-model-options="{ debounce: 400}">
  <pre>Showing {{ results.length}} out of {{personArr.length}} persons</pre>
  </div>
  <div ng-repeat = "person in personArr | filter:searchFunc as results" class="card">
    <h3>{{person.firstName}} {{person.lastName}}</h3>
    <p>Phone number: {{person.phoneNum}}</p>
    <p>Email: {{person.email}}</p>
  </div>

  <script src="https://code.angularjs.org/1.3.10/angular.js"></script>
  <script src="script.js"></script>
  </body>

</html>

## script.js
angular.module('CustomSearchDemo', [])
.controller('DemoCtrl', function($scope) {
  $scope.personArr = [
    {
      firstName: "Jane",
      lastName: "Doe",
      phoneNum: "555 1234",
      email: "janedoe@company.com"
    },
    {
      firstName: "Jane",
      lastName: "Smith",
      phoneNum: "555 5678",
      email: "contact@startup.com"
    },
    {
      firstName: "John",
      lastName: "Doe",
      phoneNum: "987 6543",
      email: "johndoe@gmail.com"
    },
    {
      firstName: "Oscar",
      lastName: "Wilde",
      phoneNum: "112 2334",
      email: "oscar@wilde.me"
    }
  ];

  // This function is called for each item in the array to be filtered
  $scope.searchFunc = function(item) {
    //Convert the item into JSON string
    var jsonStr = angular.lowercase(JSON.stringify(item));
    // Check if the search query is not empty
    if ( $scope.queryStr && $scope.queryStr.trim() ) {
      // The query may have multiple parts separated by space, so split them
      var query = $scope.queryStr.trim().split(" ");
      // Assume that the current item is a valid result
      var result = true;
      // Iterate over the parts of the search query
      for ( var partIndex in query ) {
        // Check if the JSON string contains the current query part
        if ( jsonStr.indexOf(angular.lowercase(query[partIndex])) > -1 ) {
          // Let this item feature in the result set only if other parts of the
          // query have been found too
          result = result && true;
        }
        else {
          // Even if a single part of the query was not found, this item
          // should not feature in the results
          result = false;
        }
      }
      return result;
    }
    // The search queryStr is empty, so there's no need for filtering
    // return true for all items
    else {
      return true;
    }
  };
});

## style.css
.card {
  margin: 10px 3px;
  padding: 3px 5px;
  background-color: #f1f1f1;
  -webkit-box-shadow: 4px 4px 3px 0px rgba(50, 57, 50, 0.83);
  -moz-box-shadow:    4px 4px 3px 0px rgba(50, 57, 50, 0.83);
  box-shadow:         4px 4px 3px 0px rgba(50, 57, 50, 0.83);
}
	<!DOCTYPE html>
	<html ng-app="CustomSearchDemo">
	<!-- Plunker: http://plnkr.co/edit/8qagvK -->
	<head>
	<link rel="stylesheet" href="style.css"/>
	</head>

	<body ng-controller="DemoCtrl">

	<div>
	<label>Search</label>
	<input type="text" ng-model="queryStr" ng-model-options="{ debounce: 400}">
	<pre>Showing {{ results.length}} out of {{personArr.length}} persons</pre>
	</div>
	<div ng-repeat = "person in personArr \| filter:searchFunc as results" class="card">
	<h3>{{person.firstName}} {{person.lastName}}</h3>
	<p>Phone number: {{person.phoneNum}}</p>
	<p>Email: {{person.email}}</p>
	</div>

	<script src="https://code.angularjs.org/1.3.10/angular.js"></script>
	<script src="script.js"></script>
	</body>

	</html>
	angular.module('CustomSearchDemo', [])
	.controller('DemoCtrl', function($scope) {
	$scope.personArr = [
	{
	firstName: "Jane",
	lastName: "Doe",
	phoneNum: "555 1234",
	email: "janedoe@company.com"
	},
	{
	firstName: "Jane",
	lastName: "Smith",
	phoneNum: "555 5678",
	email: "contact@startup.com"
	},
	{
	firstName: "John",
	lastName: "Doe",
	phoneNum: "987 6543",
	email: "johndoe@gmail.com"
	},
	{
	firstName: "Oscar",
	lastName: "Wilde",
	phoneNum: "112 2334",
	email: "oscar@wilde.me"
	}
	];

	// This function is called for each item in the array to be filtered
	$scope.searchFunc = function(item) {
	//Convert the item into JSON string
	var jsonStr = angular.lowercase(JSON.stringify(item));
	// Check if the search query is not empty
	if ( $scope.queryStr && $scope.queryStr.trim() ) {
	// The query may have multiple parts separated by space, so split them
	var query = $scope.queryStr.trim().split(" ");
	// Assume that the current item is a valid result
	var result = true;
	// Iterate over the parts of the search query
	for ( var partIndex in query ) {
	// Check if the JSON string contains the current query part
	if ( jsonStr.indexOf(angular.lowercase(query[partIndex])) > -1 ) {
	// Let this item feature in the result set only if other parts of the
	// query have been found too
	result = result && true;
	}
	else {
	// Even if a single part of the query was not found, this item
	// should not feature in the results
	result = false;
	}
	}
	return result;
	}
	// The search queryStr is empty, so there's no need for filtering
	// return true for all items
	else {
	return true;
	}
	};
	});
	.card {
	margin: 10px 3px;
	padding: 3px 5px;
	background-color: #f1f1f1;
	-webkit-box-shadow: 4px 4px 3px 0px rgba(50, 57, 50, 0.83);
	-moz-box-shadow: 4px 4px 3px 0px rgba(50, 57, 50, 0.83);
	box-shadow: 4px 4px 3px 0px rgba(50, 57, 50, 0.83);
	}