LiveSearch hack for WordPress

In: Blogging|PHP|Web development

24 Oct 2004

I found this old link on LiveSearch that I’d wanted to implement here but never got around to doing so until now. It’s really quite a bit of a hack right now, with most of the code coming from the LiveSearch page on the Bitflux Blog wiki and with direct calls to PHP’s MySQL functions to get it to work with WordPress.

Instead of replacing the default WordPress search box, I decided to add another one instead (that you can see right now on the left just below the “standard” search box) and label it a “LiveSearch” box. I do this because livesearch.js seems to crash Firefox randomly on occasion (as mentioned on Bitflux blog). Besides, it’s hardly fully done, as it currently only does simple SQL LIKE matching on post titles, and the CSS is somewhat inelegant.

Anyway, what I did was to add livesearch.js to the WordPress index template, and added the LiveSearch form.

<form id=”livesearchform” method=”get” action=”http://blog.codefront.net/livesearch.php”>
<input autocomplete=”off” id=”livesearch” name=”q” onkeypress=”liveSearchStart()” type=”text” />
<input id=”submitted” name=”submitted” value=”yes” type=”hidden” />
<div id=”LSResult” style=”display: none;”><div id=”LSShadow”></div></div>
</form>

Next, I hacked out a livesearch.php script (source listing for livesearch.php) that performs the relevant query on WordPress’ wp_posts table (may be differently named on your installation) and returns an XML document containing the matching post titles and their URLs. The tricky part was to map the matching post titles to their URLs (since I’m using SEO-friendly permalinks). All it took was to include the wp-blog-header.php file and have the get_permalink(ID) function return the correct URL.

The other tricky part involved preventing searches in the LiveSearch box from going to the livesearch.php page, because that’d return an XML page that the user would hardly know how to proceed from. Adding a hidden form field was a quick hack, but it works just fine and redirects the user to the search results page that WordPress spews.

// If the LiveSearch form was actually submitted (as opposed to being requested
// via a XMLHttpRequest, we redirect to the standard WP search page.
if( isset($_GET[‘submitted’]) && $_GET[‘submitted’] == ‘yes’ ) {
header(‘Location: ‘ . get_settings(‘siteurl’) . ‘/?s=’ . $_GET[‘q’]);
exit;
}

Well, that’s it for now. It feels really like a hackjob but it works just fine. Perhaps someone could roll this up into a WordPress plugin or we could get LiveSearch as a feature in WordPress in future (as Serendipity already does).

6 Responses to LiveSearch hack for WordPress

Avatar

Switch

October 24th, 2004 at 12am

Binary Bonsai has this LiveSearch function now for quite a time :) It’s really cool, and makes searching something really easy.

Avatar

fernando

December 18th, 2004 at 8pm

forgive me, but i can’t determine where to add that last piece of code you offered.

would you mind pointing me in the right direction?

Avatar

fernando

December 18th, 2004 at 9pm

Ahhh…

ok i realized that this was included in your livesearch.php example.

so it is installed, however i am having some difficulty with line 2:

include ‘db-config.php’;

this causes errors in WP1.3

can you help?

Avatar

fernando

December 18th, 2004 at 9pm

hey!

nevermind. i actually began to look at the files and see that the db-config is the wp-config, and therein were the answers to what needed to be changed in that file to match the db and the livesearch.php.

wonderful!

thanks for this page.

Avatar

Jax

January 21st, 2005 at 1pm

How do you make this work in WP 1.5?

Avatar

Julien

August 21st, 2005 at 12am

I’m a php newbie , and think to implement the livesearch to my
website , but I couldn’t figure out how to do the “get_permalink”
function, any help would be appreciated , thanks

Julien(julienmassillia@gmail.com)