LiveSearch

History

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 ).

Supported Browsers

MSIE >= 5.0 (only tested with 6.0, should work w/ 5.x, OK with 5.0 on Win98)
Mozilla/Firefox (Since at least Mozilla 1.0)
Safari >= 1.2 (according to [ Apple's Documentation|http://developer.apple.com/internet/webcontent/xmlhttpreq.html]).

Not supported

Konqueror
- not true: using Konq 3.3.2, I get this
  (JensBenecke, 2005-02-24)
Opera (probably not true any more, Google suggest works with the latest version Opera.)
Internet Explorer 5.2.3 (Mac) fails with an error (disabling patch needed)

Source Code

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.

Installation

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).

Contributions

Since the code is open source, we're glad to accept your improvements you made to the code. Send patches to chregu@bitflux.ch

Iframes

The same would be possible with iframes, but XMLHttpRequest gives you more control about the actual request.
Only GET Requests are possible with iframes, XMLHttpRequest allows you also to use POST or PUT or other HTTP request methods.

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.

Demos

Dunstan's blog one of the best examples of a LiveSearch ever
http://blog.bitflux.ch/
http://www.creatimation.net/journal/live-request
http://www.xlab.co.uk/read/497
http://maniacalrage.net/archives/
http://depository.unfoldedorigami.com/cupboard/
Serendipity the PHP blog software is also using it
Binary Bonsai
irgeek.net - formerly MyEurotrip.org
circle.ch weblog
Good Sounds search for free and legal music
...On A Long Piece Of String
Photorevolt search archived and current news
GameArena using subselect query for different categories
//hicksdesign
somefoolwitha.com
pixelgraphix
CSSHilfe
Hell Yeah Bitch! .com
walabu.com - A personal blogg(Norwegian site)
Aroussi.com - by Ran Aroussi

Links

Questions

If you have questions, please use the [Discussion] link above and add your question or comments

Future Ideas

Sliding/Paging possibilities for retrieving more results
"More info" button on each result (additional request to the server, when clicked)
iframes mode for "older" browsers
Results should disappear again, if you haven't found anything and click somewhere on the page. From August Trometer:
function closeResults() { {panel} document.getElementById("LSResult").style.display = "none"; {panel} } Then to the input box I add: onblur="setTimeout('closeResults()',2000);"

Being able to use the keyboard to select an entry from the result list is fine for me, but I couldn't wait until one of the users tried to click on a result entry. So... I added two functions that are called from the result item (via onmouseover resp. onclick with this as argument)
function liveSearchHover(el) { highlight = document.getElementById("LSHighlight"); if (highlight) { highlight.removeAttribute("id"); } el.setAttribute("id","LSHighlight"); } function liveSearchClicked(el) { highlight = document.getElementById("LSHighlight"); if (highlight) { highlight.removeAttribute("id"); } el.setAttribute("id","LSHighlight"); return liveSearchSubmit(); }