LiveSearch

This post has been archived. It's probably out of date or shameful in some other way.

The LiveSearch feature from Bitflux has inspired a fair few people to implement a LiveSearch on their own sites. The idea is simple - if a user has JavaScript, use it to show them search results as they enter their keywords, potentially saving them loading a new page to see their results.

However, the system, though very cleverly implemented, is based upon the XMLHttpRequest object, which brings with it a few problems. First, and for me most importantly, it doesn't work on Opera. I like and use Opera, so when I decided I wanted to add something similar to AddedBytes.com, that was top of the list of problems to solve.

Second, some of the versions people have come up with actually prevent a user searching normally. I want this to be a useful bonus, but not something that can stop people using the site normally under any circumstances. Of course, it goes without saying that anyone without JavaScript should not notice anything wrong or missing.

With all this in mind, I set to work. The XMLHttpRequest object method, though nicely done and perfect for the job in an ideal world, is the reason the LiveSearch was failing in Opera. Opera just doesn't support the XMLHttpRequest object. So, I ditched it. One other possibility was to use frames, which I didn't consider a serious option. Instead, I've gone for a system that makes use of JavaScript's ability to generate HTML elements on the fly and add them to a page using the DOM.

In basic terms, the LiveSearch works like this:

• User enters a letter into the search form.
• The browser detects the keypress and runs the LiveSearch script.
• The LiveSearch, since it is communicating remotely with a server, first pops a "Searching ..." notice below the search box so the user knows what is happening.
• The script polls a small PHP script on my server using the keywords entered into the search (assuming they have changed since the last LiveSearch was run).
• The PHP script generates a JavaScript document with the results of the search in it.
• This is added to the header of the page using the DOM.
• The newly-added script is executed, writing the results of the search to the page.

Problems along the way were fairly constant. One that kept frustrating me was that, in Opera or Firefox, the script didn't wait for the generated JavaScript function to be added to the page before trying to run it. What that meant was that when you searched for something, it wrote out the results of your previous search. So when you entered P - H - P, pressing the second "P" triggered the script that was sent back containing the results for a search for "PH". The next keypress would trigger the function that wrote out the results for your search for "PHP". Basically, the script always wrote out the results of the previous search. Not good.

Also, some searches returned huge result sets. I didn't want to have huge files flying around, so limited results to a maximum of 10, with, where appropriate, a link to view all results.

In the end, the script works rather well. In order to always show the correct results for a search, the liveSearch function is triggered to run on a keypress, and also set to run once every two seconds independantly of keypresses, meaning that if a results file is slow to download, the search results will still be written to a page. The search itself only actually happens if the keywords are different.

As it is still very new, I'm not going to make the code available here just yet, or run through in detail how it works. However, once I am happy all is well, I'll be posting the source here for all to use.

12 October 2004