Live search with JSON and JQuery

Hi, Today we are going to learn how to implement live search with JSON data using Jquery and this tutorial based on JSON response data and simple jquery regular expression to find the search key word in json data.

Here is the JSON data:

and it is stored in data.json file. whenever type the text in search box we makes json ajax request to get the json data and match the given search with that json response by using Jquery regular expression. Here is that Jquery code


HTML form:

It is similar to facebook style live people search. and also i have given demo for this tutorial

Thank you….

Demo and Download

  • AleWin

    nice! thanks for sharing it!

  • Pingback: Gilbert()

  • Glenn

    Thanks for the post.
    But in this sample you really dont need to request the data on every keyup, as the data is the same every time. So should just get it once.
    And you should always do errorhandling. This sample has none, and just assumes that the server will respond with the correct data every time.

    Just some thoughts :)

  • peterson

    Hey, excellent example. I recently had a chance to use it and wanted to give you feedback.

  • Seth

    Great tutorial. You forgot to add to the HTML FORM code part. After checking your demo I noticed the #results was getting populated after existing from load. After making the change it works great.

  • Ehsan Abbasi

    Thanks. I’ve also created another version: AJAX Live Search

  • Jonathan Dusza

    I modified this to use input checkboxes to submit a value to the search but the problem is that I need to accommodate multiple values (a value from each checkbox) that then searches through the JSON file. @azhagu do you think this is possible?

  • Junior Lima

    Hi, how are you? I’m from Brazil and I’m with a doubt. I would like to add a link for each “box” searched in json. would?

    sorry my English was by google translator. : D