Inspired by Apples upcoming Spotlight feature (and others, Apple just inspired me to finally do it...), I implemented a LiveSearch function into our blog. Go to http://blog.bitflux.ch/ and type something into the right search box. It should immediately show the searches found.
How it works
On the client side, we use XMLHttpRequest for sending the request to the server. There we have a little PHP script, which returns a small HTML file (http://blog.bitflux.ch/livesearch.php?s=PHP ) . This is then inserted into the page with some DOM manipulation.
The drop shadow is done with some CSS magic (see http://wubbleyew.com/tests/dropshadows.htm ).
The code is licensed under the Apache Software License 2.0 and can currently be found under http://svn.liip.ch/repos/public/fluxcms/branches/1_5/webinc/js/livesearch.js.
Grab yourself a copy of the js script. Open it and search for 'livesearch.php?q'. Change the filename and variable according to the ones you plan to use.
Now on the html page in which you wish to provide the feature you'll have to: link the script in the <head> section; add an onload="liveSearchInit()" to the body tag; create a form named "searchform" having a handler _ onsubmit="return liveSearchSubmit()". Add an input field with _id="livesearch", name="q" and onkeypress="liveSearchStart()". Then in the point where the result are to be displayed insert these two divs as placeholders:
<div id="LSResult" style="display: none;"><div id="LSShadow"></div></div>
At this point all that is missing is the script on the server which will respond to search requests. Using your preferred language write down a simple page for querying the database and retrieving matching records against the string contained in the above cited variable ('q'). Resulting output has to be a text/xml file (check http://blog.bitflux.ch/livesearch.php?q=PHP as a reference) in the form of a parent <div class="LSRes"></div>, containing one more <div class="LSRow"></div> for each record: inside the latter put whatever code had to be displayed (typically a link).
Since the code is open source, we're glad to accept your improvements you made to the code. Send patches to email@example.com
The same would be possible with iframes, but XMLHttpRequest gives you more control about the actual request.
Actually, I believe you can post a form into an iframe. It takes a little more work, but it is still doable. You could even dynamically attach the iframe, build the form, point it at the iframe (of course, this would be "verboten" in Strict - no target), and submit it.
If you have questions, please use the Discussion link above and add your question or comments