Post
Ask Question

How to Search Facebook using AngularJS

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. }  
  3.   
  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. }  
  16.   
  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. }  
  35.   
  36. ul {  
  37. list-style: none;  
  38. width: 428px;  
  39. margin: 0 auto;  
  40. text-align: left;  
  41. }  
  42.   
  43. ul li {  
  44. border-bottom: 1px solid #ddd;  
  45. padding: 10px;  
  46. overflow: hidden;  
  47. }  
  48.   
  49. ul li img {  
  50. width: 60px;  
  51. height: 60px;  
  52. float: left;  
  53. border: none;  
  54. }  
  55.   
  56. ul li p {  
  57. margin-left: 75px;  
  58. font-weight: bold;  
  59. padding-top: 12px;  
  60. color: #6e7a7f;  
  61. }  
  62.   
  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. });  
  17.   
  18. function SearchController($scope) {  
  19.     $scope.items = [{  
  20.         'image': '1.jpg',  
  21.         Name: 'Manish Pipaliya',  
  22.         Address: 'Surat,Gujarat'  
  23.   
  24.     }, {  
  25.         'image': '2.jpg',  
  26.         Name: 'Sandip Pipaliya',  
  27.         Address: 'Una,Gujarat'  
  28.   
  29.     }, {  
  30.         'image': '3.jpg',  
  31.         Name: 'Paresh Pipaliya',  
  32.         Address: 'India'  
  33.   
  34.     }, {  
  35.         'image': '4.jpg',  
  36.         Name: 'Nikunj Padshala',  
  37.         Address: 'Junagadh,Gujarat'  
  38.   
  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
Next Recommended Reading Search Records Using AngularJS In ASP.NET MVC