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://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":"Chennai", "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":"Chennai", "pic":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmIfGtxOwF4nXD5dOucio65HC859BhKNvxdS0FPQwdjT8wL3iw5Ch1jWNPwliE4TaTORJdfwdA1VYhOTlvHlSTrsFn5Qb10qXzztcFZK9ABQ7Gq0CFY7OLpkjByFWOpKVlE6D5WVOcE6k/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. For good reason, not all data is openly available. Before you can ask how I can access API data, you must first ask how I may be allowed entry to it. Many sites that store valuable information, such as Facebook or Instagram's APIs, will want to know who and what you are before willingly giving you their data. Fortunately, many websites don't care and openly provide JSON data, so we won't need to have a key today. You can also visit the link below to see more updates.


    https://games.lol/blog/pokemon-unite-slowbro-game-moves-held-battle-items/

    ReplyDelete

Blogroll

Popular Posts