Whew. That was a lot of buzzwords for one title, wasn’t it? Yeah, yeah, yeah, I know. But hey–if they fit the bill, I can’t do anything about that, can I?

Update: This script has been updated, and information on the newer version is available over here.

So let’s see it.

Fine. I first implemented it over at Accidental Procrastination, so you are welcome to go check it out there.

Update: I also have added it onto this site, so you can check it out here as well.

Why is it “better”?

Because I find the whole live search thing a little bit dumb. There’s a reason that Google Suggest never went out of beta: it’s annoying. It’s completely pointless to start searching when all I’ve typed is a b, wait until I’ve typed better-than-live, then search. I’ll tell you when I’m ready (I know where my enter key is, thank you very much).

Something that I can see as useful, however, as an AJAX search. You know, eliminate some of those page refreshes. Besides, it’s just so freaking cool.

Can I use it?

Why, of course. You can download the files over here, then continue reading as I tell you what they do and how to set this up.

First, we of course need to get ourselves a form:


<form method="get" id="search" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="text" value="Better-than-live search." name="s" id="search_input" />
<input type="submit" id="searchsubmit" value="Search" />
</form>

We’ll also need a div to show the results in:

<div id="searchresults" style="display: none;"></div>

For that nifty little close button, we need our close link: 


<a id="closeresults" href="#" title="Close search results." style="display: none;">Close</a>

Now to do the searching. I’ve included a file called search.php, here’s what is in it:


<?php
/* Make sure to replace "yourpath" with the path to your wordpress directory */
include("yourpath/wp-blog-header.php");
?>

<ul>
<?php if (have_posts()) : while (have_posts()) : the_post();  ?>
	<li><a title="Permalink to this post" href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></li>

<?php endwhile; endif; ?>
<?php if (!have_posts()) { echo('<li>No results to show.</li>'); } ?>
</ul>

After filling in yourpath, upload this to the directory that your current theme is in. Right now our search is completely functional, just ugly. This is what people without JavaScript enabled will see (though, since you’ll probably style your results, they’ll of course see some nice styles).

Bring in the JavaScript

This JavaScript is using Prototype and Script.aculo.us, so you’ll first need to include those (they are included in the zip file).

Now open up search.js. You probably need to change line 45 to include the correct path of your indicator image. For my indicator image, I’m using the first one by Jakob Skjerning over at mentalized. Set the variable url in line 72 to the path to your WordPress index. So, if you have WP installed in a directory called “wordpress,” then have it something like http://www.mydomain.com/wordpress/index.php. Savvy?

Good. Now download the files, do some CSS stylin’, and have fun. If you want a place to start with your styles, feel free to take a peak at mine (just don’t hotlink to my images):


#search {
height: 17px;
border: 1px solid black;
background: white;
width: 200px;
position: relative;
}

#search input {
font: 13px georgia;
padding-left: 4px;
height: 16px;
letter-spacing: 1px;
border: none;
width: 179px;
}

#search #search_input {

float: left;
border: 0px solid green;;
}

#search input#searchsubmit {
/* ok2.gif available at http://bs-markup.de/micons/ */
background: white url(/accidental/wp-content/themes/worn/images/ok2.gif) 1px 0 no-repeat;
margin-left: -4px;
padding-top: 15px;
width: 17px;
display: block;
float: right;
margin-top: 1px;
height: 15px;
cursor: pointer;
overflow: hidden;
}

#search input#searchsubmit:focus {
outline: none;
}

#search img#indicator {
height: 16px;
width: 17px;
}

#search img#indicator-safari {
position: absolute;
height: 16px;
width: 17px;
top: 1px;
right: -20px;
}

* html #search img#indicator {
margin-left: -4px;
}

#searchresults {
clear: both;
}

#searchresults ul {
margin: 0;
position: relative;
top: 10px;
padding: 30px;
list-style: none;
background: #191C1D;
}

#searchresults li, #searchresults a {
color: #FFF8BF;
}

#searchresults a:hover {
color: #3C4918;
}

#closeresults {
display: block;
float: right;
background: #FFF8BF url(/accidental/wp-content/themes/worn/images/close2.gif) 3px 3px no-repeat;
position: relative;
z-index: 3;
top: -20px;
text-indent: -3000px;
overflow: hidden;
height: 21px;
width: 32px;
}

Note before styling: Since Safari doesn’t allow styles on their form elements, I can’t add the JavaScript fade effect to the submit button like we do in the other browsers. So, what I’ve done is given the indicator image an id of indicator-safari if the browser is Safari, and an id of indicator for all other browsers. This will allow you to give Safari something nice as well as keep the cool submit-button-replace effect in other browsers. swan