LiveSearch with Prototype.js

8 Comments    October 27, 2006 20:17


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

Sexual counseling and education generic viagra online for sale partner issues (e.g. anorgasmia) or lifestyle factors.

. 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.
ajax.png
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



  LiveSearch
  


  8 Comments   Comment

  1. 17 years ago  

    Thanks for this Erik – if I might venture, there is one thing missing from your site’s search function – a reset button that closes the result section
    However, cools tuff as usual
    Thanks, Bill

  2. 17 years ago  

    now it’s even cooler – sorry Fredrik 😉

    Now you have only one problem: when I type ‘search’ in the searchbox and the blind comes down with the results, if I scroll down with the mouse much of your formatting is destroyed (Firefox 2) – your graphics have not moved and neither have cookie input elements for the reply box so they are tangled up in everything else.
    Ineterstingly using your new close function in the search area does not fix everything – you need to refresh for that.

    Hope this helps
    Cheers, Bill

  3. 17 years ago  

    Can all this be accomplished without the use of frames? I mean without using a js bustout script?

  4. David

    17 years ago  

    Keep getting this error:
    Error: $("s") has no properties
    Source File: http://localhost/examples/ajax/livesearch/general.js
    Line: 6

    General.js
    function init(){
    $('searchform').onsubmit = function() { doSearch();
    return false; };
    }

    function doSearch(){
    new Ajax.Updater('searchresults', 'results.php?s=' + $('s').value,
    {onComplete:function(){ new Effect.Highlight('searchresults');},
    asynchronous:true});
    }

    Event.observe(window, 'load', init, false);

    Any clue?

  5. 17 years ago  

    new Ajax.Updater('searchresults', 'results.php?s=' + $('s').value,

    Should be:

    new Ajax.Updater('searchresults', 'results.php?s=' + $('search_term').value,

  6. 17 years ago  

    Ummm… u can use prototype livesearch with search.php wordpress file.

    results.php can’t necessary…
    Think it 😉

Leave a Comment

You must be logged in to post a comment.