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);    
    }
}

3 comments:

  1. very good example thanks Srinivas

    ReplyDelete
  2. I have just submitted my essay through turnitin it was 31% and after excluding the references it was 0% of similarity. I am very pleased with help me write my paper for free so far the writer done the essay in a short time of a notice all i am hoping for now to get a distinction.

    ReplyDelete
  3. Thanks for sharing informative content…Find best digital marketing company to know more and Contact us on given no.…

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts