Sunday, August 14th, 2005 at 8:54 PM
Mac users visiting Command-Tab, specifically those using Apple’s Safari web browser, will see a new search field in the sidebar which looks quite similar to the Spotlight field built into Mac OS X 10.4. What you may not expect is that the field on this site also works like Spotlight! Begin typing a query, and results appear before your eyes without whisking you away to a new page. With the results visible, you can either go straight to a search result or view all results via WordPress’ default search page (as opposed to the Spotlight window).
A lot of effort went into recreating the Spotlight look, covering everything from the rounded search field to the slightly transparent results menu. Some other interpretations were made, such as the white spinning indicator and “Search” text hiding. Despite the changes, literally every pixel was agonized over, and there was much hair-pulling over the CSS to make everything look “just so,” however I’m quite proud of the end product.
A good portion of the XMLHttpRequest JavaScript is from the Bitflux LiveSearch plugin, which helps request the results and display them without refreshing the page. While the code has been ripped apart and reassembled in a slightly different fashion, much thanks to Bitflux is still in order, for the initial inspiration as well as some JavaScript which really helped speed up development.
This was mostly a project to experiment with CSS, JavaScript, PHP, and MySQL all at once, but it turned into a feature which worked well and looked really sharp, so it earned a permanent spot on my site. For those interested in the code, I plan to release it in the near future — you can already grab the majority of it now by viewing the page source and digging through it. The only file you can’t directly retrieve is a single PHP file which talks to the database and returns matching posts by essentially doing a LIKE “%form%” MySQL SELECT statement on post titles and content. At the moment, though, there are a number of issues I’d like to work out, such as browser compatibility and other shortcuts that were taken (see the second XMLHttpRequest for the link URL). Public support and criticism is welcome, as I’d like to see it improve and be used on others’ sites. In the future, I’d like to add multiple categories for results, making use of the Flickr API for image searching, and possibly related del.icio.us link searches using tags. Overall, though, it turned out beautifully.
Go ahead and try it out. Start typing something slowly in the search field, like “ipod” or “podcasting” and watch the results narrow!
Update: Since many people were interested in this, so I went ahead and cleaned up the code enough to make it portable, and I’m calling it version 1.0. If you want all the code, images, and Photoshop files that went into creating SpotlightSiteSearch, get it here (zipped to an impressively small 56 KB). A ReadMe RTF is included to point you in the right direction as well as document some ideas for the future. Feel free to post in the comments if you have any troubles installing. Enjoy!
This entry was posted
on Sunday, August 14th, 2005 at 8:54 pm and is filed under Mac, Programming.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, trackback from your own site, or 
Stumble it!.
fmTuner: Last.fm for WordPress
ADB Mouse Conversion
iPod Super
Very cool. I like how it mimics the L&F of Tiger, and the results return time is impressive. Nice work!
All I can say is wow.
I’ll be counting the days until you’ve got the code polished up and posted.
Thanks!
Very nice. One note, at 1920×1200 the results appear 230px off the right of the content, which is functional albeit funny lookin’. Good job.
Interesting, but the dropdown ‘menu’ isn’t quite lined up right. Plus I think i have some better ideashow to display it
Looks pretty forking awesome Collin! Great styling job, the little popdown window is amazingly well done, great job I say, great job.
-Mike
Holy cow! That is one damn fine piece of work you’ve done there.
I think people who have changed Safari’s default fonts are experiencing the menu offset. I’ll try and go through the CSS today and set a font family for each item, or try absolute positioning of each ‘div’ element.
Update: Hmm, I can’t seem to get it to happen myself. With my default fonts changed (and Safari relaunched for good measure), the only difference I notice is the search field jumps a little when the spinning indicator shows. Can anyone suggest why the menu might be offset for some, but not others?
This is amazing. I hope you release this, or I’ll just spend the next few days digging through your code!
The menu offset bug should now be fixed. I was basing it’s position on the wrong tag. If you resized your browser at all, the menu would move with it. It has been changed to reference the search form’s position, and it will no longer jump around. Hope that fixes the problem that everyone’s been having!
[...] Spotlight Seach on blogs? command-tab uses a search field similar to spotlight in osx, where results appear before your eyes. [...]
impressive. nice work.
[...] Collin over at Command-Tab is a genius or something… check out the fancy Spotlight-style search action he’s got going on over there! [...]
Very, very fine!
Per comments at bartelme.at and info on Apple’s Safari Developer FAQ, I’ve updated the HTTP-USER-Agent checking to look for “AppleWebKit” instead of “Safari,” so that all applications using WebKit (like NetNewsWire, etc.) display the Spotlight search field.
[...] Go here to try it out or to BitFlux page where it all started from. [...]
Immense search bar, have begun to integrate it into my site but I can’t seem to get the livesearch functionality working, so when I type something in, nothing happens unless return is pressed or the spotlight button is clicked, and then it goes to the usual search results page.
Any ideas?
This is a beautiful search function, Collin! I have just implemented it on the Global Moments in the Levant web site. While I had some problems, especially in regard to getting the CSS to work with my existing styles, and still have a couple kinks to iron out, I’m very pleased with the effect.
The 2 biggest problems I had was not getting the spotlight-like effect on search (as Mo Hoyt mentions above) and not having the images displayed. I think you should add the image-related CSS from your header file into the Readme for this package, as well as a note mentioning that the spotlight.js javascript file needs to be loaded in the header as well.
Thankfully this works better than the finder implementation of Spotlight which starts spinning after I enter 2 characters no matter how fast I enter them.
I wait 2 minutes until it finds all items (including in the content) that start with the letters “sp”, then and only then does the rest of my search string (spotlight) appear and the search starts again finding what I actually want this time. God, how i long for the OS 9 Find.
Me too. OS 9′s search was very fast, and didn’t waste its time on things that were unimportant. I wish Spotlight had the option to turn off metadata searching and simply look for the file name. Generally, I’m not so absent-minded that I can’t even rememeber a file name, so that’s the extent of my searching needs. Sometimes I do find / -name filename in the Terminal to search only filenames.