This is example of searching users JSON data based on user's input and showing them in clean way. Click here to know how text box with reset button (Clear field) works

JSON Data

Find below Users info in JSON format
$scope.userData = [
            {"id":"1", "name":"Srinivas Dasari", "place":"Chennai", "pic":"https://lh3.googleusercontent.com/-nBqk0jHahk8/VnL9EvT6IPI/AAAAAAAADdU/4JB3A-1zjTM/s160-Ic42/srinivas_dasari.jpg"},
            {"id":"2", "name":"Srinivas Tamada", "place":"Atlanta", "pic":"https://lh3.googleusercontent.com/-lkebnHGHGcs/VnL9E4nO_FI/AAAAAAAADdY/z2IWGONMG8E/s160-Ic42/srinivas_tamada.jpg"},
            {"id":"3", "name":"Sri Harsha", "place":"Hyderabad", "pic":"https://lh3.googleusercontent.com/-x69ytvh8GkA/VnL9Dqye1jI/AAAAAAAADdM/pBDbJRX8Vxo/s160-Ic42/harsha.jpg"},
            {"id":"4", "name":"Lokesh Raghuram", "place":"Chennai", "pic":"https://lh3.googleusercontent.com/-7XM-i20j7CQ/VnL9EZnDLYI/AAAAAAAADdQ/kR99DUgRhak/s160-Ic42/lokesh.jpg"},
            {"id":"5", "name":"Bala Ganesh", "place":"Chennai", "pic":"https://lh3.googleusercontent.com/-snzuBGu0CJE/VnL9DksYVSI/AAAAAAAADdA/7Y0EvQbWc7I/s160-Ic42/ganesh.jpg"},
            {"id":"6", "name":"Arun kumar", "place":"Chennai", "pic":"https://lh3.googleusercontent.com/-HiQ4bqPp-fk/VnL9Dqo7u0I/AAAAAAAADdc/NqhwXqgb4Ac/s160-Ic42/arun.jpg"}
            ];

Markup

By using filter, we can search JSON data
<div class="slinput" ng-init="">
    <i class="fa fa-search left-icon"></i> 
    <input placeholder="Search here" ng-model="searchInputVal"/> 
    <i ng-class="{'fa' : true, 'fa-close' : true, 'right-icon' : true, active : (searchInputVal.length > 0)}" ng-click="searchInputVal = ''"></i>
</div>
<div class="media user" ng-repeat="user in userData | filter:searchInputVal">
      <div class="media-left">
        <a href="#">
        <img class="media-object" src="{{user.pic}}" alt="...">
        </a>
      </div>
      <div class="media-body">
        <h4 class="media-heading">{{user.name}}</h4>
        {{user.place}}
      </div>
    </div>
</div>
The same functionality implemented with jQuery with more lines of code, you can check it here

0 comments:

Blogroll

Follow this blog by Email

Popular Posts