Simple facebook type jquery search engine lightning fast

The post was updated and the newer version can be found here

Dear Friends,

I’m Swadesh, a young software engineer who is always fascinated about facebook applications.

Once i came across facebook search bar which search for friends, communities, applications, etc.


I was always wondering how the search is so quick (The result comes instantly). After a long period of research and study, i was finally able to simulate the amazing feature.

Here is the trick that worked for me

Step-1: Include Jquery and some css into your page

<script src="js/jquery.min.js">

<link href="search_style.css" rel="stylesheet" type="text/css"/>

Step-2: We will now write javascript which will collect data available at DOM, if necessary it will search through the whole database.

The javascript search idea
  • on page load, “Load all data of friends from database into DOM”
  •  Declare an array which will hold the DOM data
  • Push the DOM data into the javascript array
  • Handle the keyup event which will subsequently search for the javascipt array object. If not found it will call the ajax function which will collect data from database.
  • Push the retrieved data again into the DOM and search from there

Step-3: The div tag to hold the loaded result & the place to display the result

<input type="text" id="ipi"></input>
<div id="search_result" style="display:none;">

<div id="sr"></div>

2 thoughts on “Simple facebook type jquery search engine lightning fast

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s