This post has been archived. It's probably out of date or shameful in some other way.
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.
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).
- 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.
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.