Brandon Fuller

My New Blog Search Bling

Every now and then I get this itch to spice up the blog with some new technology. I had been working with some AJAX stuff at work so that was the first candidate. The first obvious thing to do was to spice up the search box so it did something dynamic. After hours of Ajaxifing at work, this was a 15 minute exercise.

I decided to implement the Google Suggest-type search box. I didn’t like the Movable Type search CGI script because it wasn’t going to be easy to customize quickly. I did a search and found a sample on Movalog that did what I wanted. I plugged it in but I discovered they were using Google’s Javascript library (ac.js). Its all obfusacted so I couldn’t figure out how to tweak it without a cheat sheet and hurting my brain. So I just used their server PHP scripts and reimplemented the client side myself. So I swapped it out and replaced with the lovely Ajax.Autocompleter class and wrapped it up quickly.

If you want to do this on your site, you can follow these steps. If you find errors, let me know — but don’t but me if you can’t get it working. Its probably something you did. :)

1. Download the script.aculo.us package. They have .zip’s and .gz’s in the upper right corner. Get the files and put them on your server. I put them in my MTStaticWebPath/js directory. You probably know where yours is.

2. Download the server side component. There are 2 files inside. Open the ezsql.php file and fill in your database login info at the top. Then upload the ezsql.php file to your server. I suggest for beginners that you just upload to the root directory of your blog….where index.xml is. Others you can move if you like. Do NOT upload the suggest_search.php file. What you need to do with this is create a new Movable Type Index Template. Use the contents of the suggest_search.php file as the contents of the template. Name the template Suggest Search and call the Output File suggest_search.php. Save it and rebuild it. You should now see the ezsql.php file and the suggest_search.php file in your blog’s root directory.

3. Edit your Main Index template (assuming you want to add the feature to that search box). Add those script libraries in so they get included. Add these on a line just above your </head> tag.

<script type="text/javascript" src="<$MTStaticWebPath$>js/prototype.js"></script>
<script type="text/javascript" src="<$MTStaticWebPath$>js/scriptaculous.js"></script>

4. More edits in your Main Index template. This time we have to hook up the search field so that it makes the suggest request. The items in bold were the changes I made.

<div class="side">
<form name="searchform" method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<input id="search" name="search" size="25" autocomplete="off" />
<input type="submit" value="Search" name="subButton" />
</form>
<div id="autocompleterSearch" class="autocompleter"></div>
<script type="text/javascript">
new Ajax.Autocompleter(
     'search', 
     'autocompleterSearch', 
     '<$MTLink template="Suggest Search"$>',
     { paramName: 'value', minChars: 2, afterUpdateElement: function() { document.searchform.submit(); } } );
</script>
</div>

5. One more step. We need to style our autocompletion box. Go into your site’s Stylesheet index template and add these definitions. You can change as you see fit but get it working with these first and then experiment.

div.autocompleter
{
   border: 1px solid black;
   background-color: white;
   position: float;
}
div.autocompleter ul
{
   list-style-type: none;
   margin: 0px;
   padding: 0px;
}
div.autocompleter ul li
{  
   list-style-type: none;
   display: block;
   margin: 0;
   padding: 2px;
}
div.autocompleter ul li.selected
{
   background-color: #ffb;
}
div.autocompleter ul li span.value
{
   display: none;
}
div.autocompleter ul li span.informal br
{
   clear: left;
}
div.autocompleter ul li span.result
{
   color: black;
   font-weight: bold;
   float: left;
   display: block;
}
div.autocompleter ul li span.count
{
   color: green;
   text-align: right;
   font-weight: normal;
   float: right;
   display: block;
   white-space: nowrap;
}