When I updated to version 2.0.3 of wordpress, I came across a some ajax plugins. Live search 1.2 seemed great, but the version just did not work as described…. bummer… so I came across Ajaxsearch 0.1 and surprise, surprise, it actually worked. The idea behind Ajaxsearch, intentionally or not, is very smart.

When you start typing stuff into the searchbox, in the background the server is going to execute the php script that search every tie you type a letter. So in order to get results fast, you need a very sleek script that is doing just only that as optimal as possible.

Ajaxsearch works independently from wordpress includes and functions (which are great if you just load the page once ). So I started to integrate the instant search into my brajeshwar theme. As I wanted to see the text in the message aswell, and dropdown box below the search field was simply not an option. I didn’t want an autocomplete function, I wanted an instant search function! So now it pushes articles away if it needs space for the search results. Which is actually not so difficult at all if you know a bit of CSS markup…. because the ajaxsearch javascript uses innerhtml to drop the results in an div. which is practical because now I could drop

<div id="instantsearch"></div>

where-ever I want.

Then i dropped this in the CSS:

#instantsearch div {
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
background: #FFFFEE;
}
#instantsearch ul li {
background: none;
line-height: 15px;
padding: 0 15px;
font-size: 0.85em;
}
#instantsearch ul{
margin: 0;
}
#instantsearch h3 {
padding: 0px 15px;
margin-top: 0px;
text-transform: uppercase;
letter-spacing: 0.2em;
}
#instantsearch h3 {
padding: 20px 15px 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
}
#col-right input {
width: 185px;
}

Then I dropped the following html code inside a text widget, but if you don’t have the widget you can also put it inside the left or right sidebar

<script type="text/javascript" src="/ajaxsearch.js" mce_src="/ajaxsearch.js"></script><form action="javascript:return false;" onsubmit="return false;"><div><input type="text" name="searchnicoberleenl1" value="Type to search instantly..."
onfocus="this.value = '';" onblur="this.value = 'Type to search instantly...';"
onkeyup="SendQuery(this.value)"/></div></form><br />

Please make sure you change the searchnicoberleenl1 to something else. I had to use a name that is unique, I can’t set autocomplete=”off” because it’s not valid xhtml 1.0.

You can download the modified ajaxsearch.php and ajaxsearch.js from here. Put them in the root of your site.

So I start with ajaxsearch.js. I didn’t change much. The code does a good job, I only cleaned it up (tabs instead of spaces, for file download purpose) and removed the unnecessarily UnHideDiv() and HideDiv()

As you can see I changed a lot of things in ajaxsearch.php. First of all, the original version contains serious flaws:

• It does not take the post status in account, this means, that drafts and private posts are just as searchable as published posts
• html code in the post will be also on the search result, which could rune your complete blog layout
• The like query was not very sql server friendly when you have a big blog.

The MySQL (like some other SQL servers) has a Full-Text-Search feature, which is a really great database search feature which almost gives you a functionality google inside your database. In a big blog you need such a feature because every keystroke must turn up a search result very fast.

The modified ajaxsearch.php uses the Full-Text-search feature and if this feature turns up with 0 results, it’s going to fallback on the old LIKE query. That’s because Full-Text-Search has a downside. In the MySQL implimentation it does not work on some known english stopwords and it’s start searching when 4 characters are given is set as default setting. In Boolean mode the sql server can give some results below 4 characters, but it’s not perfect.

Furthermore, you need to execute on sql query to enable the Full-Text-Search on that fields:

CREATE FULLTEXT INDEX full_index ON `wp_posts`(
`post_title`,
`post_content`);

In a 404 template you could use something like this:

<script type="text/javascript">
<!--
SendQuery('<?php echo trim(str_replace('/', ' ', str_replace('-', ' ', $_SERVER['REQUEST_URI']))); ?>');
//-->
</script>

Be sure to put this after the sidebar where the javascript file ajaxsearch.js is loaded

I have no intension in releasing a real plugin. If you want to pack this in a real plugin, be my guest… (if you have permission of blewtooth)… anyway… If you in want to use something in this article, please do so… but it would be nice if you thank me in a comment in the code…

Last Modified : January 5th, 2007 Filed under : JavaScript, PHP, WordPress TAG(s) : AJAX, instant, JavaScript, PHP, plugin, search, WordPress Navigate : Previous post / Next post