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.
<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"
}
]