Live Search with jQuery & JSON

Meanwhile I was amazed with the power of jQuery for handling the JSON files. Then i decided to make a live search with JSON & jQuery so thats why i am here And now stop the BUK BUK and get into the code

Live search

in live demo search for javascript, husain, hunk, youtube, jquery

Download Script

View Demo

html

html is super easy it has 2 divs first one with the id of searcharea and second one with id of update. In search are Their is a input field and in update div we are going to show the result.

<div id="searcharea">
 <h2>Live Search</h2>
 <input type="search" id="search"/>
</div>
<div id="update"></div>

hunklessons.json(JSON file)

json is filled with some dummy data of hunklessons blog post

[
 {
  "name":"husain saify",
  "photo":"http://lh5.googleusercontent.com/-oqoAWmCo7CA/AAAAAAAAAAI/AAAAAAAAAPk/osoYaXlwlxI/s512-c/photo.jpg"
 },
 {
  "name":"hunk lessons",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigZ8Dc5YPz139SECKcfjInGQJRj_hfp1rgwKJYlRzkms6E8K8hMKamhYkBAX7bOH25PJq1b71nLnN8XR9IvN4L7Nob-LKAmEKP789o5rXK-PshLR4PynBOCslR_LeCfoEIE3YuxOWYgwOT/s1600/hunlessonslogo.png"
 },
 {
  "name":"Embed Youtube Videos With JavaScript",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_j54IvA7Aq33ki6M3434urcid27n0ClRiqmBMM8vMYCDN5ridXXSD0G9a7XjN8Fat-aK_9zinWWH2kkjoWRAK-ZzVW8apBEPXFyIJZnIXaOtW2Oab9Aj1eyI10c_LUX8IUju6axtlNzYC/s1600/embed-yt-videos.png"
 },
 {
  "name":"Drag and Drop Game With html5 & javascript",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilI4aVbre0Eb3XiyTw-OgU4zpKCZn3biRSMOwpEENgAUjNQDtKXEO7u6SAWvZrowC7dLaiVNFp_2RgETn8lcU2Hrk3q7B0lYOL3xc6Uql4xVLofm2Rm6RcqtWxFVIkmRVzLu10rMEtivdM/s1600/dragndropgame.png"
 },
 {
  "name":"Css3 Progress Bar",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi2C5B0K11byBRwxtZf16Pyvoib-Iuurh65LTBZniZNlli-4hqB7Zom8xMNZJtV7XoKCUqZGv5E9LdQst61c-5C7r_zRks1CimgyUEg6xn8aJR2BXK4KhEjw_xI4hhZV5FCZ7dwp9UlnRD/s1600/cssprogressbar.png"
 },
 {
  "name":"jQuery Username Availability check",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK4STXWSx7wncxFrAvo6C5kzbqP3L0NBWjE1HdDVcKdNMem9aBeBiKtxCiyIqtHraMMoapeInyVRcNGBajUoa_Y86j82oGyyCyHqSZsOxS_JTYYDbWE6P4ppenZhUSivnbdhf9zhT-JmwJ/s1600/username+available.png"
 },
 {
  "name":"Select And Upload Multiple Images With jQuery & Ajax",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi31ZFckzzjR2X33q0m5HhqCQr8jWYO8dfDdVBq-ZdhYnYxlM-4f_WElDsSB3ow_obcsS7soAuAkcQMzrC5UG9qUFzEe7F-tGZPY9pXRxtg5i5B2CbJGF3agXsu8uE3P_Q_zUY9Wcz1zWz0/s1600/selectanduploadmultipleimaes.png"
 },
 {
  "name":"hunk husain",
  "photo":"http://lh5.googleusercontent.com/-oqoAWmCo7CA/AAAAAAAAAAI/AAAAAAAAAPk/osoYaXlwlxI/s512-c/photo.jpg"
 }
]

JavaScript

In this file we are getting the hunklessons.json file with jquery $.getJSON('hunklessons.json', function(data){}); and looping throw the data with jQuery $.each(data, function(key, val));  and appending the data to a output variable at the last display the output variable.

<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type="text/javascript">
$('#search').keyup(function() {//when key is pressed in search bar
 var searchTerm = $(this).val(); //val of search bar
 var myExp = new RegExp(searchTerm, "i"); //regular experation

 $.getJSON('hunklessons.json', function(data){//get the json file

  var output = "<ul id='result'>";
  $.each(data, function(key, val){
   if(val.name.search(myExp) != -1){//search for the data in the json file
    output += '<li>';
    output += '<h3>' +val.name+ '</h3>';
    output += '<img src="'+val.photo+'" style="height:100px;">';
    output += '</li>';
   }
  });//end each
  output += "</ul>";
  $('#update').html(output);//output result to the update div
 });
});
</script>

Like Us on Facebook / Add Hunk As Friend