This is example of searching users JSON data based on user's input and showing them user 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
var 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

<!-- Search text box with clear field -->
 <div class="slinput">
    <i class="fa fa-search left-icon"></i> 
    <input id="searchInput" onkeyup="searchUsers()" placeholder="Search here" /> 
    <i class="fa fa-close right-icon"></i>
 </div>
  
 <!-- Users information will be in this div -->
 <div id="users">
 </div>

jQuery Code

// user's input for search
var searchVal = '';

$(function(){
      // if text box value is not null, then darken reset icon
      $(".slinput input").keyup(function(){
        var val = $(this).val();   
        if(val.length > 0) {
           $(this).parent().find(".right-icon").css('color','#555');
        } else {
          $(this).parent().find(".right-icon").css('color','#ccc');
        }
      });
      
      // if user click on reset icon, clear text field
      $(".slinput .right-icon").click(function(){
        $(this).parent().find("input").val('');
        $(this).css('color','#ccc');
        loadData(userData);
      });
      
      loadData(userData);
});

// Displaying Information to Users
function loadData(data) {
    var htmlData = '';
    $.each(data, function(index, val){
        htmlData += '<div class="media user">'+
        '  <div class="media-left">'+
        '    <a href="#">'+
        '      <img class="media-object" src="'+val.pic+'" alt="...">'+
        '    </a>'+
        '  </div>'+
        '  <div class="media-body">'+
        '    <h4 class="media-heading">'+val.name+'</h4>'+
        '    '+val.place+
        '  </div>'+
        '</div>';
    });
    $("#users").html(htmlData);
}

// Search users data based input search keyword
function searchUsers() {
    var val = $("#searchInput").val();
    if(val == searchVal) {
        return; 
    } else {
        searchVal = val;
        var searchResults = {};
        searchResults = [];
        $.each(userData, function(i, v) {
            if (v.name.toLowerCase().indexOf(val) != -1) {
                searchResults.push(v);  
            }
        });
        loadData(searchResults);    
    }
}

1 comment:

Blogroll

Follow this blog by Email

Popular Posts