Here, we will see how to search Json objects data in live search using jquery and JavaScript. Json data format helps to exchange data between cross programming language applications or platforms. We need to search string keys in the array of Json objects and we display them in the html layout.
We will use the core JavaScript and jQuery function to search the string objects. Follow the below example snippet to create your own live search function on any applications (javascript support applications).
Step 1: Create an index.html file on your computer and add the below data examples to the header section on this file.
var data = [
{"id":"1","employee_name":"Johnson","employee_salary":"45000","employee_age":"30","profile_image":"avatar.png"},{"id":"2","employee_name":"Smith","employee_salary":"50000","employee_age":"28","profile_image":"avatar.png"},{"id":"3","employee_name":"Brown","employee_salary":"50000","employee_age":"32","profile_image":"avatar.png"},{"id":"4","employee_name":"Jones","employee_salary":"45000","employee_age":"27","profile_image":"avatar.png"},{"id":"5","employee_name":"Miller","employee_salary":"50000","employee_age":"31","profile_image":"avatar.png"},{"id":"6","employee_name":"Davis","employee_salary":"50000","employee_age":"30","profile_image":"avatar.png"},{"id":"7","employee_name":"Garcia","employee_salary":"45000","employee_age":"29","profile_image":"avatar.png"},{"id":"8","employee_name":"Rodriguez","employee_salary":"50000","employee_age":"35","profile_image":"avatar.png"},
{"id":"9","employee_name":"Wilson","employee_salary":"45000","employee_age":"33","profile_image":"avatar.png"},
{"id":"10","employee_name":"Martinez","employee_salary":"50000","employee_age":"27","profile_image":"avatar.png"}];
We need to store the above data objects into the JavaScript data variable. Here, we will search the strings to these stored json data objects and return the data as response.
Step 2: Next, create the html layout to show the search textbox for user input and to show the filtered result.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<title>Live Json Search</title>
</head>
<body>
<div class="container" style="padding:150px 350px;">
<h1>Live Search Example</h1>
<form role="form">
<div class="form-group">
<input type="input" class="form-control input-m" id="text-search" placeholder="Type your search character">
</div>
</form>
<div id="filter"></div>
</div>
</body>
</html>
Step 3: Then, create the live search javascript function and add it to the footer on the html layout.
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
var data = [
{"id":"1","employee_name":"Johnson","employee_salary":"45000","employee_age":"30","profile_image":"avatar.png"},{"id":"2","employee_name":"Smith","employee_salary":"50000","employee_age":"28","profile_image":"avatar.png"},{"id":"3","employee_name":"Brown","employee_salary":"50000","employee_age":"32","profile_image":"avatar.png"},{"id":"4","employee_name":"Jones","employee_salary":"45000","employee_age":"27","profile_image":"avatar.png"},{"id":"5","employee_name":"Miller","employee_salary":"50000","employee_age":"31","profile_image":"avatar.png"},{"id":"6","employee_name":"Davis","employee_salary":"50000","employee_age":"30","profile_image":"avatar.png"},{"id":"7","employee_name":"Garcia","employee_salary":"45000","employee_age":"29","profile_image":"avatar.png"},{"id":"8","employee_name":"Rodriguez","employee_salary":"50000","employee_age":"35","profile_image":"avatar.png"},
{"id":"9","employee_name":"Wilson","employee_salary":"45000","employee_age":"33","profile_image":"avatar.png"},
{"id":"10","employee_name":"Martinez","employee_salary":"50000","employee_age":"27","profile_image":"avatar.png"}];
$('#text-search').keyup(function(){
var searchField = $(this).val();
if(searchField === '') {
$('#filter').html('');
return;
}
var regex = new RegExp(searchField, "i");
var output = '<div class="card mb-2">';
var count = 1;
$.each(data, function(key, val){
if ((val.employee_name.search(regex) != -1)) {
output += '<div class="row p-2">';
output += '<div class="col-3"><img class="img-responsive" src="'+val.profile_image+'" alt="'+ val.employee_name +'" /></div>';
output += '<div class="col-7">';
output += '<h5>' + val.employee_name + '</h5>';
output += '<p>' + val.employee_salary + '</p>'
output += '</div>';
output += '</div>';
if(count%1 == 0){
output += '</div><div class="card mb-2">'
}
count++;
}
});
output += '</div>';
$('#filter').html(output);
});
});
</script>
Follow the complete code example of live search on json objects using javaScript and jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<title>Live Json Search</title>
</head>
<body>
<div class="container" style="padding:150px 350px;">
<h1>Live Search Example</h1>
<form role="form">
<div class="form-group">
<input type="input" class="form-control input-m" id="text-search" placeholder="Type your search character">
</div>
</form>
<div id="filter"></div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
var data = [
{"id":"1","employee_name":"Johnson","employee_salary":"45000","employee_age":"30","profile_image":"avatar.png"},{"id":"2","employee_name":"Smith","employee_salary":"50000","employee_age":"28","profile_image":"avatar.png"},{"id":"3","employee_name":"Brown","employee_salary":"50000","employee_age":"32","profile_image":"avatar.png"},{"id":"4","employee_name":"Jones","employee_salary":"45000","employee_age":"27","profile_image":"avatar.png"},{"id":"5","employee_name":"Miller","employee_salary":"50000","employee_age":"31","profile_image":"avatar.png"},{"id":"6","employee_name":"Davis","employee_salary":"50000","employee_age":"30","profile_image":"avatar.png"},{"id":"7","employee_name":"Garcia","employee_salary":"45000","employee_age":"29","profile_image":"avatar.png"},{"id":"8","employee_name":"Rodriguez","employee_salary":"50000","employee_age":"35","profile_image":"avatar.png"},
{"id":"9","employee_name":"Wilson","employee_salary":"45000","employee_age":"33","profile_image":"avatar.png"},
{"id":"10","employee_name":"Martinez","employee_salary":"50000","employee_age":"27","profile_image":"avatar.png"}];
$('#text-search').keyup(function(){
var searchField = $(this).val();
if(searchField === '') {
$('#filter').html('');
return;
}
var regex = new RegExp(searchField, "i");
var output = '<div class="card mb-2">';
var count = 1;
$.each(data, function(key, val){
if ((val.employee_name.search(regex) != -1)) {
output += '<div class="row p-2">';
output += '<div class="col-3"><img class="img-responsive" src="'+val.profile_image+'" alt="'+ val.employee_name +'" /></div>';
output += '<div class="col-7">';
output += '<h5>' + val.employee_name + '</h5>';
output += '<p>' + val.employee_salary + '</p>'
output += '</div>';
output += '</div>';
if(count%1 == 0){
output += '</div><div class="card mb-2">'
}
count++;
}
});
output += '</div>';
$('#filter').html(output);
});
});
</script>
</body>
</html>