Live search on JSON Objects Data Using jQuery

JSON is a very popular data format to exchange data between cross-programming languages applications or platforms.

This tutorial help to live search on JSON data objects using jquery and JavaScript. We will search string keys in the array of the JSON object and display them in an HTML layout, like live searching in the Facebook friend list.

We will use core JavaScript and jQuery regx() function to search string into the JSON array objects. You can use this code snippet from anywhere and with any programming languages application which supported JavaScript.

In this example, we first created a simple employee dataset containing their name, age, and salary, and stored it in JSON format within a variable.

On a web page, we added a text box where a user can input a search query. When the user types in the text box, a jQuery event is triggered to search for data from the JSON file.

We stored the JSON data into a variable in our page and used a jQuery regular expression to search the JSON data based on key-value pairs. The search results are then displayed on the web page using the jQuery append() method to add the HTML code to a specific HTML tag.

The displayed search results include employee name, age, and salary.

You can also check other tutorials of JSON Object,

• jQuery jqGrid Example with JSON Data Using Rest Service
• Live search on JSON Objects Data Using jQuery
• How to Process/Iterate on JSON Objects in JavaScript
• JSON data Object Uses and Example using Javascript

Simple Steps to Create Live Search using JSON and jQuery

Let’s create a ‘live-search’ project which can be located anywhere on your computer. Creating a index.html file and writing all the below steps code into this file.

Step 1: We need a sample json data for live search. We are taking below sample JSON data and added into head section of index.html file.

var data = [  
   {  
      "id":"1",
      "employee_name":"Tiger Nixon",
      "employee_salary":"320800",
      "employee_age":"61",
      "profile_image":"default_profile.png"
   },
   {  
      "id":"2",
      "employee_name":"Garrett Winters",
      "employee_salary":"434343",
      "employee_age":"63",
      "profile_image":"default_profile.png"
   },
   {  
      "id":"3",
      "employee_name":"Ashton Cox",
      "employee_salary":"86000",
      "employee_age":"66",
      "profile_image":"default_profile.png"
   },
   {  
      "id":"4",
      "employee_name":"Cedric Kelly",
      "employee_salary":"433060",
      "employee_age":"22",
      "profile_image":"default_profile.png"
   }
];

Stored above JSON data objects into the JavaScript data variable. We will search strings into these json data and return filtered json data objects as a response.

Step 2: Created a simple HTML layout to show a search textbox for user input and a div container to show the filtered results.

<div class="container" style="padding: 50px 250px;">
 <form role="form">
  <div class="form-group"><input id="txt-search" class="form-control input-lg" type="input" placeholder="Type your search character"> 
  </div>
 </form>
 <div id="filter-records">&nbsp;</div>
</div>

We are creating a HTML form which will have search text box as a input field and id is '#txt-search'. The User will enter the search string into this text input field.

We have created a empty filter-records div that will contain filtered JSON data based on the search string.

Step 3: Let’s write core code into footer of index.html file which will search string into JSON data and return filtered JSON records.

$('#txt-search').keyup(function(){
            var searchField = $(this).val();
			if(searchField === '')  {
				$('#filter-records').html('');
				return;
			}
			
            var regex = new RegExp(searchField, "i");
            var output = '
<div class="row">';
            var count = 1;
			  $.each(data, function(key, val){
				if ((val.employee_salary.search(regex) != -1) || (val.employee_name.search(regex) != -1)) {
				  output += '<div class="col-md-6 well">';
				  output += '<div class="col-md-3"><img class="img-responsive" src="'+val.profile_image+'" alt="'+ val.employee_name +'"></div>';
				  output += '<div class="col-md-7">';
				  output += '<h5>' + val.employee_name + '</h5>';
				  output += '' + val.employee_salary + ''
				  output += '</div>';
				  output += '</div>';
				  if(count%2 == 0){
					output += '</div><div class="row">'
				  }
				  count++;
				}
			  });
			  output += '</div>';
			  $('#filter-records').html(output);
        });

Above code working functionality steps by steps are below:

• Search string is running on keyup event onto the input search box
• Get search string value from input search box using jQuery
• Create regular expression using regex() jQuery method
• Search string on json data using regex exp. I am searching string into employee_salary and employee_name column
• Created HTML list from filtered json data
• Bind filtered json html view with filter-records div container

I hope its helps you to live search on json data using jQuery.

Demo and Download source Code of Json live search