Quick Search Notes
posted on july 27, 2004, tag: site
My newly implemented "quick search" is based on the open-source code project LiveSearch, recently started by Christian Stocker. LiveSearch uses JavaScript's XMLHttpRequest functionality to send a GET request to a PHP file, which does the actual searching and returns a formatted list of results, which LiveSearch then places inside an existing (but previously hidden) DIV. Stocker's code is quick and works really well, and the best part is that he leaves it up to you to write the actual search functionality. You just have to return your results in a logical way. I didn't make many changes to LiveSearch, other than some visual tweaks (compare my results box with other sites using LS)—the real difference between my functionality and other sites using it is what my search can do.
How it works
Rather than just searching in entry titles, you'll be searching in titles and content, which yields much more accurate results. Results from my search are also placed in order (descending) of how many hits your query received per result, meaning that the top result will always be the most accurate, the others less and less accurate downward. In addition to this, I've also included very simple quote detection: wrapping your terms in quotes will search for results which contain exactly what you searched for. For example, searching for "apple ipod" without the quotes will return any entry whose title or content contains either "apple" or "ipod" or both. But searching for "apple ipod" with the quotes will return only entries that contain those two words in that order separated by a space. Note that currently there is no support for multiple quotes, so "apple ipod" "is great" will search for "apple ipod is great." I might fix this, but I don't know that it's necessary—most of you would probably never use the search that extensively.
In case you're curious as to how I rank and order the entries, it's very simple. I use PHP's pregmatchall() function to count the number of times your terms appear in each result, then build an array using those numbers. I then sort the array and take the top 6 results from there. It's simple and pretty accurate.
Caveats
The LiveSearch functionality isn't without its quirks. From time to time, it simply won't receive a response from its GET request. When this happens, strange things could happen. You might not see a result box, or you might see an empty one. It doesn't happen very frequently, but when it does you can fix it by simply editing your search results to start the search running again.
Oh, and of course, it doesn't work in older browsers (or Opera). I think that pretty much goes without saying.
Comments
There are 15 comments, comments are closed
compuwhiz7 on 07/27/2004:
Very neat. I may need to consider implementing that on my own site, because it's both technologically cool and fast. As Aaron Boodman (of youngpup.net fame) said, users like fast DHTML apps.
mudge on 07/27/2004:
I am thoroughly impressed by this feature.
Perhaps you could make it so that you can scroll through the list by holding down either of the directional keys.
At the moment it just freezes when I hold the down key rather than accelerating downwards through the selections as I had expected.
Also, it might be worth moving it from its relatively obscure place in the sidebar to somewhere more prominent, like in the header, for example?
Tom on 07/27/2004:
Wow, I like it alot. Very quick, as compuwhiz said.
One thing I don't get is what the PHP file does. It's just a PHP file that will search a database when you have a GET header? Didn't quite understand that.
@mudge:
It works for me, holding down the arrow key. Maybe he added it after your post...
I'm using Firefox 0.9.2, by the way.
mudge on 07/28/2004:
For posterity's sake: I'm using Safari 1.2.2.
Garrett on 07/28/2004:
mudge—the only browser that doesn't allow for holding-down the keys is Safari. I don't know why, but I would assume this will probably change with Safari 1.3, since it has a new JavaScript engine.
About moving it to somewhere other than the header... I'm not sure yet. While it is a cool feature, searching has never been so big on this site. When I used to have a search button in the header of my site, it would only be used about twice a week, and only for strange things like "qwerty."
Tom—the PHP file does a search of the db when it receives a GET request, yes. Then it returns the results and LiveSearch inserts them into the hidden DIV.
mudge on 07/28/2004:
Concerning moving the search box: You are right.
I must admit, I was just giddy about the feature (it is the first real useful application of JavaScript I have seen that hasn't involved inane GIFs following your cursor or making pop-up windows even more annoying) and wished to draw undue attention to it.
swimp on 07/28/2004:
Woh, cool.
Jason on 07/30/2004:
i would have to say the best feature of implementing the search this way is the speed. the fact that it is displayed on a layer is cute but could have been accomplished by simply using a iframe inside a div.
the speed of the application makes a good replacement to a standard search method. even if you were not to make it apparent that it was using layers.
Garrett on 07/30/2004:
iframes are not allowed in XHTML 1.1 (which I use—each page on this site is valid). The results aren't displayed in a layer... it's just a regular DIV in block display mode.
Geremy on 07/31/2004:
Definitely the best search function that I've ever seen!
Jason on 08/02/2004:
WHATEVER, im going to make my own html standard and iframes will be allowed, and div tags will only be allowed if they are followed by a comment that says "GARRETT IS A TOOL"
Garrett on 08/02/2004:
Do you actually know anything about standards-based web design? Or only what Microsoft tells you is cool?
Jason on 08/02/2004:
you dont know who this is dude ?
Garrett on 08/02/2004:
No, no, I know who you are. I just found it funny that you were anti proper webdesign and pro improper. That's all. It's all good.
Jason on 08/02/2004:
you didnt realize i was kidding ? did you really think i wanted to actually make a garrett is a tool tag ?