Javascript / VB Script Thread, Building a Wordpress / website live Ajax search using jQuery in Web Development; Building a Wordpress / website live Ajax search using jQuery Building a Wordpress / website live Ajax search using jQuery ...

Short Link: http://forum.egypt.com/enforum/showthread.php?t=6887

Developer · 02-12-2008, 12:01 AM

Building a Wordpress / website live Ajax search using jQuery

Building a Wordpress / website live Ajax search using jQuery

Many websites on the web have allot of content, some even have to much, so that's why a search engine comes in handy! Like Wordpress which has one by default. Just enter your search term and browse true the results! But if you want to make it even better, you build a live search using jQuery! Which search automatically after you entered your keyword!

Step 1 - Download jQuery and the required plugin

Before we can start editing our Wordpress theme, we have to download the required JavaScript files. For this tutorial we will use the jQuery JavaScript framework and a plugin called “jQuery Live Ajax Search” which is made by Andreas Lagerkvist.
Egypt.Com EnForum

Just download the Production version because we are not going to edit the jQuery Framework.
The plugin files can be found here: plugin.zip |
Visit plugin author website
Step 2 - Uploading the required files

Now you can use this method for any websites, but in this case we will apply it to a Wordpress theme.
So lets upload the files to our theme directory, in this tutorial, i will use the default Wordpress theme.
Theme Directory: wp-content/themes/default/
Now this is how you need to structure your files to keep it nice and clean:
Egypt.Com EnForum

Make sure you use the same structure for your files.
Which means:

wp-content/themes/default/css/live-search.css
wp-content/themes/default/js/jquery-1.2.6.min.js
wp-content/themes/default/js/jquery.liveSearch.js

Step 3 - Include the files

To include the JavaScript and the CSS we have to edit the header of the template, which is header.php. Here we can find the <head> tags, where the JavaScript and CSS should be loaded.
view plain copy to clipboard print ?

<link rel=stylesheet type="text/css" href="<?php bloginfo('template_directory'); ?>/css/live-search.css">
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.liveSearch.js"></script>
<?php wp_head(); ?>

<?php bloginfo('template_directory'); ?>

<?php bloginfo('template_directory'); ?> This is a Wordpress code that will return the URL to the directory of the theme. Which will return the following:
view plain copy to clipboard print ?

<link rel=stylesheet type="text/css" href="http://xcodetuts.com/wp-content/themes/default/css/live-search.css">
<script type="text/javascript" src="http://xcodetuts.com/wp-content/themes/default/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://xcodetuts.com/wp-content/themes/default/js/jquery.liveSearch.js"></script>

<form method="get" id="searchform" action="http://xcodetuts.com/">
<label class="hidden" for="s">Search for:</label>
<div><input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>

<form method="get" id="searchform" action="http://xcodetuts.com/"> <label class="hidden" for="s">Search for:</label> <div><input type="text" value="" name="s" id="s" /> <input type="submit" id="searchsubmit" value="Search" /> </div> </form> Now when you enter a search keyword and hit Search, you will see that the url changes in your browser address bar:
Egypt.Com EnForum

As you can see your search term will display after the s=, if you would change this you will see that it will look for the term you have changed it to. So this is how it works, i needed to make this clear because it will help you understand the next step.
Step 5 - Configuring jQuery live ajax search

Now its very easy to activate the live search, just open footer.php and add the following before </body>
view plain copy to clipboard print ?

<script type="text/javascript">
$('#s').liveSearch({ajaxURL: 'index.php?s='});
</script>

Now that’s not really what we want right, because we get the search results back including the whole template. So we need to apply a little hack to make this work. First let’s change the JavaScript to:
view plain copy to clipboard print ?

<script type="text/javascript">
$('#s').liveSearch({ajaxURL: 'index.php?ajax=1&s='});
</script>

<?php if($_GET['ajax'] == '1'){ ?>
//Our code for live search
<?php }else{ ?>
// Here is the code that's allready in that file
<?php } ?>

<?php if($_GET['ajax'] == '1'){ ?> //Our code for live search <?php }else{ ?> // Here is the code that's allready in that file <?php } ?> So now when you would enter some text:
view plain copy to clipboard print ?

<?php if($_GET['ajax'] == '1'){ ?>
Hi there! This is going to be our live search!
<?php }else{ ?>
// Here is the code that's allready in that file
<?php } ?>

<?php if($_GET['ajax'] == '1'){ ?> Hi there! This is going to be our live search! <?php }else{ ?> // Here is the code that's allready in that file <?php } ?>

So that works perfect! And if you would hit the search button you will see that the normal search also works fine! Egypt.Com EnForum

But now we have to make it so that it shows us the real search results.
So what i did is copy the code from the original search and changed a few things:
view plain copy to clipboard print ?

<?php if($_GET['ajax'] == '1'){ ?>
<?php if (have_posts()) : ?>
<h2>Search Results for "<?php the_search_query(); ?>"</h2>
<?php while (have_posts()) : the_post(); ?>
<div class="search-result">
<h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
</div>
<?php endwhile; ?>
<?php else : ?>
<h2>No posts found. Try a different search?</h2>
<?php endif; ?>
<?php }else{ ?>

<?php if($_GET['ajax'] == '1'){ ?> <?php if (have_posts()) : ?> <h2>Search Results for "<?php the_search_query(); ?>"</h2> <?php while (have_posts()) : the_post(); ?> <div class="search-result"> <h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3> </div> <?php endwhile; ?> <?php else : ?> <h2>No posts found. Try a different search?</h2> <?php endif; ?> <?php }else{ ?> As you can see i removed parts like <?php get_header(); ?>, <?php get_sidebar(); ?> and <?php get_footer(); ?> because these tags include template files. And we don’t want that! So this is how it would look:

Final: Search.php
view plain copy to clipboard print ?

<?php if($_GET['ajax'] == '1'){ ?>
<?php if (have_posts()) : ?>
<h2>Search Results for "<?php the_search_query(); ?>"</h2>
<?php while (have_posts()) : the_post(); ?>
<div class="search-result">
<h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
</div>
<?php endwhile; ?>
<?php else : ?>
<h2>No posts found. Try a different search?</h2>
<?php endif; ?>
<?php }else{ ?>
<?php get_header(); ?>
<div id="content" class="narrowcolumn">
<?php if (have_posts()) : ?>
<h2 class="pagetitle">Search Results</h2>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
</div>
<?php while (have_posts()) : the_post(); ?>
<div class="post">
<h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
<small><?php the_time('l, F jS, Y') ?></small>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
</div>
<?php else : ?>
<h2 class="center">No posts found. Try a different search?</h2>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
<?php } ?>

<?php if($_GET['ajax'] == '1'){ ?> <?php if (have_posts()) : ?> <h2>Search Results for "<?php the_search_query(); ?>"</h2> <?php while (have_posts()) : the_post(); ?> <div class="search-result"> <h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3> </div> <?php endwhile; ?> <?php else : ?> <h2>No posts found. Try a different search?</h2> <?php endif; ?> <?php }else{ ?> <?php get_header(); ?> <div id="content" class="narrowcolumn"> <?php if (have_posts()) : ?> <h2 class="pagetitle">Search Results</h2> <div class="navigation"> <div class="alignleft"><?php next_posts_link('« Older Entries') ?></div> <div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div> </div> <?php while (have_posts()) : the_post(); ?> <div class="post"> <h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3> <small><?php the_time('l, F jS, Y') ?></small> <p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p> </div> <?php endwhile; ?> <div class="navigation"> <div class="alignleft"><?php next_posts_link('« Older Entries') ?></div> <div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div> </div> <?php else : ?> <h2 class="center">No posts found. Try a different search?</h2> <?php include (TEMPLATEPATH . '/searchform.php'); ?> <?php endif; ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> <?php } ?> As you can see it returns the post “Hello world!”, so it works great!
Step 6 - Styling search results

We are almost done! We only need to style our results, which we can do in live-search.css. In this CSS file you can change all kind of things for the live search like the width of the results, fonts, colors etc.
First let’s change the margin and padding of h2 and h3 because its way to much:
view plain copy to clipboard print ?

div.live-search-results h2 {
font: 14px/1.2 Trebuchet MS, sans-serif;
padding: 0;
margin: 0;
}
div.live-search-results h3 {
font: 12px/1.2 Trebuchet MS, sans-serif;
padding: 0;
margin: 5px;
}

div.live-search-results h2 { font: 14px/1.2 Trebuchet MS, sans-serif; padding: 0; margin: 0; } div.live-search-results h3 { font: 12px/1.2 Trebuchet MS, sans-serif; padding: 0; margin: 5px; } So that will look like:
Egypt.Com EnForum

So that’s the end of this tutorial, ofcourse you can style it much nice and give it some nice effects! So if you enjoyed it, please leave a comment and show me what you have made!

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[AJAX] Album Next & Prev Links Use AJAX	Developer	Mods for 3.8.x	0	01-12-2008 11:36 PM
MSN Live 9 BETA - Windows Live Messenger 9	Developer	Software and Programs	0	30-11-2008 04:15 PM
[AJAX] Live Search	Developer	Mods for 3.7.x	0	30-09-2008 02:22 PM
100+ Banners For Your Website	Developer	Web Application	0	03-09-2008 08:57 PM
Wordpress Affiliate Pro //Plus// Wordpress Linkcloak	Developer	Web Application	0	01-09-2008 08:18 PM

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)