How to build a live search with JSON

This is a prototype of a project done on a client website. For the Search page, the client wanted to have a live search box wherein as the user types the name of the member in the input box, results show up at the bottom. The results show the picture of the member and also a short bio.

We decided to have the member information including the image and the short bio stored in a JSON file on the server.

How to build live search with json
Snapshot of the live search setup

What is a JSON file?
JSON stands for Javascript Object Notation. It is a text file used to exchange data between browser and server. The data is stored as javascript objects.

Sample JSON file that stores the results of the search

Example of a JSON file

[
  {
    "name":"Barot Bellingham",
    "shortname":"Barot_Bellingham",
    "reknown":"Royal Academy of Painting and Sculpture",
    "bio":"Barot has just finished his final year at The Royal Academy of Painting and Sculpture, where he excelled in glass etching paintings and portraiture. Hailed as one of the most diverse artists of his generation, Barot is equally as skilled with watercolors as he is with oils, and is just as well-balanced in different subject areas. Barot's collection entitled \"The Un-Collection\" will adorn the walls of Gilbert Hall, depicting his range of skills and sensibilities - all of them, uniquely Barot, yet undeniably different"
    }
]

Notes

  • The search results were stored in a JSON file.
  • Setup the html for the search box.
  • The input box keyup event triggered the search process.
  • The results are rendered on the page below the search box.

The html code on the page

<div id="searchArea">
      <label for="search">Live Search </label>
      Enter name/info to start the search 
      <input type="search" placeholder="enter name/info" name="search" id="search">
</div>
<div id="update"></div>

Javascript code snippet

$('#search').keyup(function(){
	var searchField = $('#search').val();
	var myExp = new RegExp(searchField, "i");
	$.getJSON('data.json', function(data){
		var output ='<ul class="searchresults">';
		$.each(data, function(key, val){
		  if((val.name.search(myExp) != -1) || (val.bio.search(myExp) != -1)) {
		    output += '<li>';
		    output += '<h2>' + val.name + '</h2>';
		    output += '<img src="images/' + val.shortname + '_tn.jpg" alt="' + val.name + '">' ;
		    output += '' + val.bio + '';
		    output += '</li>';
		  }
		});
		output += '</ul>';
		$('#update').html(output);
	});
});

I hope you found this article useful and interesting.

Have you used JSON in your project? Do you have any thoughts on how to improve the process?

Subscribe by email
If you're an email kind of person, sign up below to get the latest blog posts in your inbox! You might get some free WordPress goodies from me:-).
I promise not to spam you or share your address.

Client Love

Femy is a diligent, self motivated hard worker. She tackles all assignments with energy and enthusiasm. Femy was always easy to work with and followed directions very well. Her work was always timely and of professional quality.

William Farris Director of Software, Samsung Telecoms