Simple facebook type jquery search engine lightning fast

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>
<div id="sr">

</div>