Html Code
  1. <div ng-app="Search" ng-controller="SearchController">
  2. <div class="title">Search in Angularjs</div>
  3. <div class="mani">
  4. <input type="text" ng-model="searchString" placeholder="Enter Name" />
  5. </div>
  6. <ul>
  7. <li ng-repeat="i in items | searchFor:searchString">
  8. <img ng-src="Images/{{i.image}}" />
  9. <p>{{i.Name}}
  10. <br />{{i.Address}}
  11. </p>
  12. </li>
  13. </ul>
  14. </div>
Css Code
  1. lock;
  2. }
  4. .mani {
  5. background-color: #5c9bb7;
  6. background-image: -webkit-linear-gradient(top, #5c9bb7, #5392ad);
  7. background-image: -moz-linear-gradient(top, #5c9bb7, #5392ad);
  8. background-image: linear-gradient(top, #5c9bb7, #5392ad);
  9. box-shadow: 0 1px 1px #ccc;
  10. border-radius: 2px;
  11. width: 400px;
  12. padding: 14px;
  13. margin: 50px auto 20px;
  14. position: relative;
  15. }
  17. .mani input {
  18. background: #fff no-repeat 13px 13px;
  19. border: none;
  20. width: 30%;
  21. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkU5NEY0RTlFMTA4NzExRTM5RTEzQkFBQzMyRjkyQzVBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkU5NEY0RTlGMTA4NzExRTM5RTEzQkFBQzMyRjkyQzVBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTk0RjRFOUMxMDg3MTFFMzlFMTNCQUFDMzJGOTJDNUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTk0RjRFOUQxMDg3MTFFMzlFMTNCQUFDMzJGOTJDNUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4DjA/RAAABK0lEQVR42pTSQUdEURjG8dOY0TqmPkGmRcqYD9CmzZAWJRHVRIa0iFYtM6uofYaiEW2SRJtEi9YxIklp07ZkWswu0v/wnByve7vm5ee8M+85zz1jbt9Os+WiGkYdYxjCOx5wgFeXUHmtBSzpcCGa+5BJTCjEP+0nKWAT8xqe4ArPGEEVC1hHEbs2oBwdXkM7mj/JLZrad437sCGHOfUtcziutuYu2v8XUFF/4f6vMK/YgAH1HxkBYV60AR31gxkBYd6xAeF3VzMCwvzOBpypX8V4yuFRzX2d2gD/l5yjH4fYQEnzkj4fae5rJulF2sMXVrAsaTWttRFu4Osb+1jEDT71/ZveyhouTch2fINQL9hKefKjuYFfuznXWzXMTabyrvfyIV3M4vhXgAEAUMs7K0J9UJAAAAAASUVORK5CYII=);
  22. margin-left: 479px;
  23. line-height: 19px;
  24. padding: 11px 0;
  25. border-radius: 2px;
  26. box-shadow: 0 2px 8px #c4c4c4 inset;
  27. text-align: left;
  28. font-size: 14px;
  29. font-family: inherit;
  30. color: #738289;
  31. font-weight: bold;
  32. outline: none;
  33. text-indent: 40px;
  34. }
  36. ul {
  37. list-style: none;
  38. width: 428px;
  39. margin: 0 auto;
  40. text-align: left;
  41. }
  43. ul li {
  44. border-bottom: 1px solid #ddd;
  45. padding: 10px;
  46. overflow: hidden;
  47. }
  49. ul li img {
  50. width: 60px;
  51. height: 60px;
  52. float: left;
  53. border: none;
  54. }
  56. ul li p {
  57. margin-left: 75px;
  58. font-weight: bold;
  59. padding-top: 12px;
  60. color: #6e7a7f;
  61. }
  63. .title {
  64. font-size: 50px;
  65. margin-left: 450px;
  66. color: #4791FF;
  67. }
Angularjs Code Or javascript Code
  1. var app = angular.module("Search", []);
  2. app.filter('searchFor', function() {
  3. return function(arr, searchString) {
  4. if (!searchString) {
  5. return arr;
  6. }
  7. var result = [];
  8. searchString = searchString.toLowerCase();
  9. angular.forEach(arr, function(item) {
  10. if (item.Name.toLowerCase().indexOf(searchString) !== -1) {
  11. result.push(item);
  12. }
  13. });
  14. return result;
  15. };
  16. });
  18. function SearchController($scope) {
  19. $scope.items = [{
  20. 'image': '1.jpg',
  21. Name: 'Manish Pipaliya',
  22. Address: 'Surat,Gujarat'
  24. }, {
  25. 'image': '2.jpg',
  26. Name: 'Sandip Pipaliya',
  27. Address: 'Una,Gujarat'
  29. }, {
  30. 'image': '3.jpg',
  31. Name: 'Paresh Pipaliya',
  32. Address: 'India'
  34. }, {
  35. 'image': '4.jpg',
  36. Name: 'Nikunj Padshala',
  37. Address: 'Junagadh,Gujarat'
  39. }, {
  40. 'image': 'yupme1.jpg',
  41. Name: 'Raj Patel',
  42. Address: 'India '
  43. }];
  44. }
Output
This is all user List:
I Enter User Name:
I Enter User Last name:

If User in not in our list then:
Thank You