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?

Leave a Reply

Your email address will not be published. Required fields are marked *

Endorsed by these folks ...

My experience working with femKreations was excellent. Femy was very creative, professional, and easy to work with. She accommodated all my requests regarding layouts, and suggested some very creative solutions. She delivered all projects on time, and I was very happy with results. I sure will go back to her for all my future needs.

Palak Chauhan Designer/Artist, Creations by Palak