Search via Ajax
Thanks to a kind mention by Josh Porter, I’ve seen something of a spike in traffic. And a lot of it has come from links relating to AJAX.
I’m actually working on a cool AJAX demo and the search tool on this site was just a quick hack. In case you’re interested in how it works, here’s a quick tutorial. First of all, I’m using MovableType for my content management system (I know there are cooler systems out there, I just happen to know MT pretty well. And the new Beta is shaping up nicely — although I couldn’t upgrade the 3.2b2 database to 3.2b3, grrr…). So I created a module to add search functionality to every page.
The first thing the template module does is include a javascript, scripts/search.js. then it lays out the search window. By default the search window is hidden via the #searchWindow css rule. This prevents it from appearing incorrectly before the load event handler can fire.
There’s some icky (and poorly coded I must admit) animation code to make the window slide out from the top of the page when you click the tab. Any good DHTML resource has that sort of thing available by the truck load.
When the user clicks the search button or presses return, I create an XMLHttpRequest object and ask it to fetch the standard MovableType search CGI using the search string specified in the form. When the request completes, I hide replace the content of the results div with the full text of the search, hide the progress bar and show the results.
Simple.
Feel free to steal it.
Comments
plz give a good ajax example with all the code.
Aruna, I’m not really certain how much more I can add. I’ve updated the JavaScript to make certain it’s well documented — I was caught a little off guard when Josh mentioned this particular subject. I think it’s one of the more minor things I’m trying to cover.
There are plenty of step-by-step-hand-holding JavaScript and Ajax samples out there. Just look on del.icio.us and you’ll find dozens.
Cool stuff. Does the search engine skip the content of the posts, focusing on just the headlines and short descriptions? (Searches for ‘traffic’ and ’spike’ return no hits.)
I guess that’s part of the MT package…
Wow, you’re right. The standard mt-search.cgi doesn’t seem to find content explicitly entered in the excerpt field. That’s lame.
I guess I’ll file a bug with Six Apart.
Emily, I’ve fallen victim to thinking everyone is using Safari and sees the nice little RSS badge in the address bar. I’ll be working on the About page this evening, and the RSS feed badges will go there.
While you wait, you can always crack open the source of the index page and pull out the HREF of the feed of your choice.
[…] Back a million years ago, I wrote about using Ajax to allow visitors to search my site. When I ported the Web site from MovableType to WordPress, I had to give up this feature because I didn’t know PHP or WordPress well enough to make it work. […]
Hi Jeff,
I’d really love to steal your search JavaScript but it’s gone. I guess since you’ve made the switch. I’m still on MT and would love to use this code. Would you be able to dig out the code?
sorry how rude. Please!