Friday, 10 February 2017

Live Search JSON Data Using Ajax jQuery



Hi, You have already know Ajax Live Data search by using Mysql table data in PHP, but in this post we have show you how to make live data search of JSON File data by using Ajax JQuery. We all already know JSON stand for Java Script Object Notation and it is a very lightweight data processing format and it can easy for human read. So In this post we have store data in JSON file and by using Ajax JQuery we will make simple Live data search application that search data from JSON file and display on web browser without refreshing of page.

In this example we have first create simple employee data like name, image and location of employee and store into JSON format in file and that file we have store in our working folder. After this we have create one simple page and in that page we have create one textbox. So when we have type something in textbox then at that time jquery event will file which search data from JSON file. For load JSON file data in our page we have use Ajax getJSON() method. By using this method we can load JSON file data in our page. After loading JSON File data we want search data from this JSON data, so we have use simple jquery regular expression. By using this jquery regular expression can search JSON data by key and value pair and for display search data on web page we have use Jquery append() method. This method will append html code in particular HTML tag and that display on web page. Here search data like employee image, name and location will load below textbox in drop down list format and here we can search by name and location also.

This type of feature is mostly we can see in Social media site like facebook etc. But we can also use this feature in our developing project also. In this post we have share you a source code and online demo also for better understanding regarding this feature like Live JSON data search by using Ajax JQuery.





Online Demo



JSON Live Data Search using Ajax JQuery

Employee Data








    Source Code


    
    <!DOCTYPE html>
    <html>
     <head>
      <title>Webslesson Tutorial | Search HTML Table Data by using JQuery</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <style>
      #result {
       position: absolute;
       width: 100%;
       max-width:870px;
       cursor: pointer;
       overflow-y: auto;
       max-height: 400px;
       box-sizing: border-box;
       z-index: 1001;
      }
      .link-class:hover{
       background-color:#f1f1f1;
      }
      </style>
     </head>
     <body>
      <br /><br />
      <div class="container" style="width:900px;">
       <h2 align="center">JSON Live Data Search using Ajax JQuery</h2>
       <h3 align="center">Employee Data</h3>   
       <br /><br />
       <div align="center">
        <input type="text" name="search" id="search" placeholder="Search Employee Details" class="form-control" />
       </div>
       <ul class="list-group" id="result"></ul>
       <br />
      </div>
     </body>
    </html>
    
    <script>
    $(document).ready(function(){
     $.ajaxSetup({ cache: false });
     $('#search').keyup(function(){
      $('#result').html('');
      $('#state').val('');
      var searchField = $('#search').val();
      var expression = new RegExp(searchField, "i");
      $.getJSON('data.json', function(data) {
       $.each(data, function(key, value){
        if (value.name.search(expression) != -1 || value.location.search(expression) != -1)
        {
         $('#result').append('<li class="list-group-item link-class"><img src="'+value.image+'" height="40" width="40" class="img-thumbnail" /> '+value.name+' | <span class="text-muted">'+value.location+'</span></li>');
        }
       });   
      });
     });
     
     $('#result').on('click', 'li', function() {
      var click_text = $(this).text().split('|');
      $('#search').val($.trim(click_text[0]));
      $("#result").html('');
     });
    });
    </script>
    
    

    data.json


    
    [
      {
        "name":"Angel Lewis",
        "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/3/000/0d4/2f7/07a3d35.jpg",
        "location":"Seattle, WA"
      },
      {
        "name":"Justin Dean",
        "image": "https://media.licdn.com/mpr/mpr/shrink_100_100/AAEAAQAAAAAAAAIMAAAAJGExNTE4OWY4LWU4ODMtNDA2ZS1iNWI1LWNkYmIyOWMyMGQ5Zg.jpg",
        "location":"Muscatine, IA"
      },
      {
        "name":"Nora Blake",
        "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/2/005/0b8/118/387e091.jpg",
        "location":"Seattle, WA"
      },
      {
        "name":"Russell Fox",
        "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/2/000/084/26e/2d9e05b.jpg",
        "location":"Albuquerque, NM"
      },
      {
        "name":"Daryl Bradley",
        "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/3/000/042/0ad/197566e.jpg",
        "location":"Buckeystown, MD"
      },
      {
        "name":"Benjamin Gonzales",
        "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/8/005/0b2/1c9/2a423c1.jpg",
        "location":"Atlanta, GA"
      },
      {
        "name":"Viola Francis",
        "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAASJAAAAJGMyMTUzN2EyLTExY2ItNDZiNS1hMTY1LTI4NDA2NDMwZmFkNg.jpg",
        "location":"Zanesville, OH"
      },
      {
        "name":"Reginald Benson",
        "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/1/000/10f/3cc/275a407.jpg",
        "location":"Gilbert, AZ"
      },
      {
        "name":"Glenda Ray",
        "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/8/005/0ac/1ca/07c25a2.jpg",
        "location":"Baltimore, MD"
      },
      {
        "name":"Paula Vargas",
        "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/5/005/03e/073/36a5c47.jpg",
        "location":"Baltimore, MD"
      },
      {
        "name":"Mark Armstrong",
        "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/5/005/010/09b/39b122d.jpg",
        "location":"Hallandale Beach, FL"
      },
      {
        "name":"Jaime Campbell",
        "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAATUAAAAJDJkY2Q1Mzk0LTI1YzItNDFhNy04ZmQ0LWY3NzZlZTZlNGVmYw.jpg",
        "location":"Zanesville, OH"
      },
      {
        "name":"Mike Beck",
        "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/2/000/01c/0d4/2b69e7c.jpg",
        "location":"Garner, NC"
      },
      {
        "name":"Ann Lowe",
        "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/7/000/1f6/019/29cd853.jpg",
        "location":"Cabin John, MD"
      },
      {
        "name":"Ryan Wolfe",
        "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/1/000/0bf/335/05a57f6.jpg",
        "location":"Los Angeles, CA"
      },
      {
        "name":"Dwayne Gutierrez",
        "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/3/000/29b/028/2426536.jpg",
        "location":"San Jose, CA"
      },
      {
        "name":"Bill Burke",
        "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/7/000/1bc/12e/1423106.jpg",
        "location":"Bakersfield, CA"
      }
    ]
    
    

    31 comments:

    1. If i want to display employee details after getting search results then how i can implement ??

      ReplyDelete
    2. thank you guy, a great code ;-)

      ReplyDelete
    3. Hi, it wont work. It shows nothing

      ReplyDelete
    4. thanks, and can you please tell me how to retain search result value after refresh the page and this proper working with mouse but doesn't work with keyboard arrow top bottom arrow for select li, so please reply me how I m able to solve these problems...

      ReplyDelete
    5. Thankyou So Much. How I can Populate this data from my database. Can you Please Help me.

      ReplyDelete
    6. hello why it show double data after type search but if we tab other browser or use other program and then switch back it show only one data

      ReplyDelete
    7. Thanks, but i have trouble because my json file have 35 mb, can you suggest to me how to load that amount of data , without broken the load while is searching.

      ReplyDelete
    8. someone please hello me it doesnot work while clearing the search name all the search result comes on the screen.
      thank you.

      ReplyDelete
    9. Thank you Sir for the code it works excellent but one issue is there it only works on firefox not on google chrome why??????

      ReplyDelete
    10. Not working in Google Chrome Browser.

      ReplyDelete
    11. Likewise, I get the same result. This seems like it'll be a great option to implement for some of my projects, but I'm seeing the same thing. Out of the box, I only get the live results in Firefox. I'm on a Mac and it isn't happening in Chrome or Safari, just FF. For good user experience, it'll be great if an adjustment to the code can help this work without making end users tweak their browser settings.

      ReplyDelete
    12. Also, Firefox shows the live search dropdown, but doesn't show the images. For me, they display as "broken image" icons. Looks like LinkedIn's CDN is returning a 404 error for each of the image URLs in the JSON file.

      ReplyDelete
    13. If you are running in crome run the service for example if you are using python run simple httpserver in your local machine in the path where file was located
      eg:
      python -m SimpleHTTPServer 9000
      In browser http://localhost:9000/search.html

      ReplyDelete
    14. Really not working in Chrome.

      ReplyDelete
    15. Eventually I found a solution so the code could work in Chrome. You just need to transfer it to a server. That is the only thing that worked for me.

      ReplyDelete
    16. Sweet.
      It worked perfectly.

      ReplyDelete
    17. why $('#state').val(''); ?

      ReplyDelete
    18. Not working in chrome, please fix this :)

      ReplyDelete
    19. How to hide the result list when search bar is empty?

      ReplyDelete
    20. Is this code run in to the Codeigniter or not?
      plz help to run this code in to the codeigniter.

      ReplyDelete
    21. How can I change your code into 'go to url after click the result'?

      ReplyDelete
    22. Can I add "No results found"?

      ReplyDelete
    23. Nice Code solved my problem thumb up...............

      ReplyDelete
    24. Thanks alot, works perfectly!!!

      ReplyDelete