How to Search Facebook using AngularJS

Html Code

<div ng-app="Search" ng-controller="SearchController">
    <div class="title">Search in Angularjs</div>
    <div class="mani">
        <input type="text" ng-model="searchString" placeholder="Enter Name" />
    </div>
    <ul>
        <li ng-repeat="i in items | searchFor:searchString">
            <img ng-src="Images/{{i.image}}" />
            <p>{{i.Name}}
                <br />{{i.Address}}
            </p>
        </li>
    </ul>
</div>

Css Code

lock;
}

.mani {
background-color: #5c9bb7;
background-image: -webkit-linear-gradient(top, #5c9bb7, #5392ad);
background-image: -moz-linear-gradient(top, #5c9bb7, #5392ad);
background-image: linear-gradient(top, #5c9bb7, #5392ad);
box-shadow: 0 1px 1px #ccc;
border-radius: 2px;
width: 400px;
padding: 14px;
margin: 50px auto 20px;
position: relative;
}

.mani input {
background: #fff no-repeat 13px 13px;
border: none;
width: 30%;
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=);
margin-left: 479px;
line-height: 19px;
padding: 11px 0;
border-radius: 2px;
box-shadow: 0 2px 8px #c4c4c4 inset;
text-align: left;
font-size: 14px;
font-family: inherit;
color: #738289;
font-weight: bold;
outline: none;
text-indent: 40px;
}

ul {
list-style: none;
width: 428px;
margin: 0 auto;
text-align: left;
}

ul li {
border-bottom: 1px solid #ddd;
padding: 10px;
overflow: hidden;
}

ul li img {
width: 60px;
height: 60px;
float: left;
border: none;
}

ul li p {
margin-left: 75px;
font-weight: bold;
padding-top: 12px;
color: #6e7a7f;
}

.title {
font-size: 50px;
margin-left: 450px;
color: #4791FF;
}

Angularjs Code Or javascript Code

var app = angular.module("Search", []);
app.filter('searchFor', function() {
    return function(arr, searchString) {
        if (!searchString) {
            return arr;
        }
        var result = [];
        searchString = searchString.toLowerCase();
        angular.forEach(arr, function(item) {
            if (item.Name.toLowerCase().indexOf(searchString) !== -1) {
                result.push(item);
            }
        });
        return result;
    };
});

function SearchController($scope) {
    $scope.items = [{
        'image': '1.jpg',
        Name: 'Manish Pipaliya',
        Address: 'Surat,Gujarat'

    }, {
        'image': '2.jpg',
        Name: 'Sandip Pipaliya',
        Address: 'Una,Gujarat'

    }, {
        'image': '3.jpg',
        Name: 'Paresh Pipaliya',
        Address: 'India'

    }, {
        'image': '4.jpg',
        Name: 'Nikunj Padshala',
        Address: 'Junagadh,Gujarat'

    }, {
        'image': 'yupme1.jpg',
        Name: 'Raj Patel',
        Address: 'India '
    }];
}

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