SodhanaLibrary

This is example of sorting users JSON data based on user's input and showing them in clean way. Click here to know how search works

Click here to see DEMO

JSON Data

Find below Users info in JSON format

var userData = [{
   "id": "1",
   "name": "Srinivas Dasari",
   "place": "Chennai",
   "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhA5fOz8ZjFn7zXs1kFKXFeTFqMWzyFxubauOtoNHj2GriikheNZrygwTISEcZI5UixSPlLEMvQPeAODkVHq2YhxDNI4pUGUTOXxjkWsMJgGI6J4g1c7Wnclcr2Fr-6Mid2fXRm3hi95Q/s160-Ic42/srinivas_dasari.jpg"
 }, {
   "id": "2",
   "name": "Srinivas Tamada",
   "place": "Atlanta",
   "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnm-TqpEDLGKsrSJTxXx-bSEQ7DRurhyphenhyphenCQhxhFxXyPpk_59S37ota4-Nvs2jhWdtm3z4aVu7XxKDDZ9K8lQQ83AuUgOGVr3TSkDlmukJvGDTB7MY1kV2S7VDuKUoUaJQeuB6JKcz7P2bk/s160-Ic42/srinivas_tamada.jpg"
 }, {
   "id": "3",
   "name": "Sri Harsha",
   "place": "Hyderabad",
   "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK64KLM_dEvzKgVmPuCjyJQ-3Bduqq2LCftBUyQaJ79su8ZAj3yd6NHDd32Bn3zfrsOL9Xdb-5H4_aQDacTf3aqI6-8_gJiXbxtTGeroOtocuBFw0aiUltM-kaiz3zaUIxl6s_0VQaVOc/s160-Ic42/harsha.jpg"
 }, {
   "id": "4",
   "name": "Lokesh Raghuram",
   "place": "London",
   "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxBVfYEdbm3hJyS7HFmjroVAG_qu_B4XR95F1uppfCqlxqLs4li4fHGz6nBWAOFqwAE5GeuJMu2UvXbCvaTS8zFoyMVqGqQTnfznNK89n1xdSCzy7ae7TCOApNiPZVTUG5mr5gVEUPW4o/s160-Ic42/lokesh.jpg"
 }, {
   "id": "5",
   "name": "Bala Ganesh",
   "place": "Chennai",
   "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjucYVyqDQD7sKpL4KEu5OkSP5uGGJ-0urrw7lNoh04H_doBcVoxE-lZn8kQaj8xmPNA8unWAFkZBUwh4FKxuEdrGx_HdZ6MH5n0liXHt-OEH8p8QB0pU85YNtab8bOrOhBBQALLqcfPno/s160-Ic42/ganesh.jpg"
 }, {
   "id": "6",
   "name": "Arun kumar",
   "place": "Visakhapatnam",
   "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmIfGtxOwF4nXD5dOucio65HC859BhKNvxdS0FPQwdjT8wL3iw5Ch1jWNPwliE4TaTORJdfwdA1VYhOTlvHlSTrsFn5Qb10qXzztcFZK9ABQ7Gq0CFY7OLpkjByFWOpKVlE6D5WVOcE6k/s160-Ic42/arun.jpg"
 }];

Markup

By using orderBy, we can sort JSON data. Observe below highlighted code

 <!-- 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>
 
 <!-- Radio buttons sort order property -->
 <div style="padding: 10px 10px;background: white;margin-bottom:5px;border:1px dotted #aaa">
    Sort By &nbsp
    <label class="radio-inline">
      <input type="radio" value="name" name="sortOrder" checked> name
    </label>
    <label class="radio-inline">
      <input type="radio" value="place" name="sortOrder"> place
    </label>
  </div>
  
 <!-- Users information will be in this div -->
 <div id="users">
 </div>

jQuery Code for Sorting

var prop = $("input[name=sortOrder]:checked").val();
var asc = true;
results = results.sort(function(a, b) {
     if (asc) return (a[prop] > b[prop]) ? 1 : ((a[prop] < b[prop]) ? -1 : 0);
     else return (b[prop] > a[prop]) ? 1 : ((b[prop] < a[prop]) ? -1 : 0);
});

jQuery Code

// user's input for search
var searchVal = '';
var results = [];
$(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);
      });
      
      // change sort order, if user clicks on radio button  
      $("input[name=sortOrder]").change(function(){
          sortData();
      });
      
      results = userData;
      sortData();
});

// sort json data in ascending order based by property
function sortData() {
    var prop = $("input[name=sortOrder]:checked").val();
    var asc = true;
    results = results.sort(function(a, b) {
         if (asc) return (a[prop] > b[prop]) ? 1 : ((a[prop] < b[prop]) ? -1 : 0);
         else return (b[prop] > a[prop]) ? 1 : ((b[prop] < a[prop]) ? -1 : 0);
    });
    loadData(results);
}

// 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;
        results = [];
        $.each(userData, function(i, v) {
            if (v.name.toLowerCase().indexOf(val) != -1) {
                results.push(v);  
            }
        });
        sortData(); 
    }
}