LiveSearch is a feature on many blogs these days, available as WordPress plugins or for implementation on non WordPress sites. It’s a cool feature but how does it work, and can we customize it? Of course we can.

To continue tha Ajax tutorials which was started with this simple one we now continue with a slight more complicated one.

For you who don’t know what Livesearch is we start with a small description. LiveSearch is a search function on wep pages allowing the visitor to search and the result is presented in “real time”, either as an animated drop down box or perhaps the search form is filled with the results and the visitior get the feeling it all happens “live”. An example can be seen by searching this site. The benefit with this is not only the cool feature but also a smaller bandwith usage as the whole page does not require reloading.

One drawback is that we need some javascript framework to be included on the pages which can be quite large at timesdepending on witch features are beeing used. For simpicity we are going to use the prototype and scriptaculous frame work. This can be achieved without these framworks too but it requiers more code, and besides we don’t need to invent the wheel again.

Besides the framwork we need three file for this to work:

• livesearch.php
  The file is the main search file from where the Ajax call is made.
• general.js
  Our javascript file which implement the features from the prototype framework
• results.php
  The external file called by with Ajax and are responsible for the database search.

To make it clear how the program flow goes we can illustrate this with simple chart.

Let’t start with the livessearch.php file. This is mainly a search form from where the search term is passed to the functions in general.js.

livesearch.php