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"
}
]
Wow
ReplyDeleteIf i want to display employee details after getting search results then how i can implement ??
ReplyDeletethank you guy, a great code ;-)
ReplyDeleteHi, it wont work. It shows nothing
ReplyDeletethanks, 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...
ReplyDeleteGood
ReplyDeleteThankyou So Much. How I can Populate this data from my database. Can you Please Help me.
ReplyDeletehello 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
ReplyDeleteThanks, 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.
ReplyDeletesomeone please hello me it doesnot work while clearing the search name all the search result comes on the screen.
ReplyDeletethank you.
Thank you Sir for the code it works excellent but one issue is there it only works on firefox not on google chrome why??????
ReplyDeleteThe code is working for me Chrome
DeleteThats Nice
Deleteits not working .. i have to connect with server ?
DeleteNot working in Google Chrome Browser.
ReplyDeleteuse on localhost
DeleteUse in wamp server(local host)
DeleteNot working in google chrome.
ReplyDeleteLikewise, 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.
ReplyDeleteAlso, 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.
ReplyDeleteIf 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
ReplyDeleteeg:
python -m SimpleHTTPServer 9000
In browser http://localhost:9000/search.html
Really not working in Chrome.
ReplyDeleteEventually 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.
ReplyDeleteSweet.
ReplyDeleteIt worked perfectly.
why $('#state').val(''); ?
ReplyDeleteNot working in chrome, please fix this :)
ReplyDeleteHow to hide the result list when search bar is empty?
ReplyDeleteIs this code run in to the Codeigniter or not?
ReplyDeleteplz help to run this code in to the codeigniter.
How can I change your code into 'go to url after click the result'?
ReplyDeleteCan I add "No results found"?
ReplyDeleteNice Code solved my problem thumb up...............
ReplyDeleteThanks alot, works perfectly!!!
ReplyDeleteYou have to wacht out in your JSON File. If the file has an array inside another array, is necesary do a i++.
ReplyDeleteHello there I want to know how I can make this work on my Google Chrome browser and how to implement this code in C# MVC ?
ReplyDeletehi, can i get the source code for this project. Thank you
ReplyDeleteIt very awesome!
ReplyDelete