LiveSearch Creative Commons License

posted mid-afternoon by Constantinos. Filed under Code, WP Plugin

This post was originally published in 2006
The tips and techniques explained may be outdated.

You might notice the spiffy little search box on the navigation bar of this blog. It’s an implementation of the LiveSearch code which I incorporated recently.

It’s a nice little tool, using pretty straight basic (albeit a bit complex) AJAX code. However it did require some effort to implement this, as several files needed to to be modified, and the required files placed all over the place. This meant that the ability to use this tool was restricted to people with some understanding of PHP, and also did not enable the clean integration of the code in WordPress.

So what I have done is integrate the required code/css into a small plugin which can be managed via the WordPress administration section. The plugin consists of a single directory which should be placed in your wp-content/plugins directory, as well as two files that should be placed in your chosen theme directory. If you use multiple themes (for example via the Theme Switcher plugin), then you should place a copy of these two files in the directory of each theme you want to use it in. The two files are:
livesearch.css
searchform.php

The first one is so that users can style the LiveSearch boxes so it fits with their chosen theme, and users should not be required to make manual modifications to their code every time they change a theme. The second file is a replacement of the existing one, and enables the LiveSearch box. In case the plugin is disabled from the WordPress admin section (or simply disabled from the LiveSearch Options page, or the plugin deleted from the plugins directory), then the default search box will be displayed instead, without breaking its functionality (with some minor modifications). Note that running your WordPress installation with LiveSearch enabled will turn the “Search” button off, but disabling the plugin will turn it back on.
Updated 2007-03-27: LiveSearch 1.3 is now up! No files need to be moved to make this version work. You can edit livesearch.css in-place, in its plugin directory. If you wish to maintain multiple themes, then you can still move livesearch.css into your theme directory. A style file found in the current theme’s directory will always be used over the one located in the plugin directory.

Updated 2008-03-17: Updated to LiveSearch 1.4, to support WordPress 2.5.

As a side note, the outputed html should be XHTML Strict, with tentative WCAG triple-a compliance (like the rest of this site. Visit the accessibility page for more information.

Download:

You can download the plugin from its WordPress Plugin Directory, unpack it and follow the README instructions to install it (which are pretty much a review of this post).

As is always the case in this sort of thing, there are no guarantees. The plugin should work, but just in case make a backup of any files you replace (though now you shouldn’t need to even do that). There’s always room for improvement, and I’m not just referring to the LiveSearch code, but also to the plugin wrapper. Feel free to comment.

Change Log

For more detailed explanations of the changes in each version, follow the series links in the sidebar.

71 Responses to “LiveSearch”

  1. 1. Comment by Noel Jenkins
    on 2006-03-16 @ 9.32 pm · Quote #7 ·

    Thanks very much for this.
    I couldn’t get LiveSearch to run on my K2 theme so I stripped out the old code and used your plugin instead. Works very well. The behaviour of the output is slightly different in IE than Firefox, but it’s not a problem. I can’t work out how to make the input form a little wider – any clues?

  2. 2. Comment by Constantinos
    on 2006-03-16 @ 10.38 pm · Quote #9 ·

    The way the output looks is completely controlled through the single livesearch.css file. I know that it looks different in IE (the output comes out on the right of the search box instead of under it, at least in my case), and the workaround should be somewhere in the css though I have not had time to look at it. I probably will at some point.

    Now to change the size of the input box, you’ll have to modify the searchform.php file. I should probably have added an option to specify this from the admin section, and probably will (but probably not until next week). The change you need to do follows:

    Search for the string “name=” in the searchform.php file. It should be on a line by itself (with its value). Go to the end of that line, hit return to create a new line, and there enter:
    size="xx"
    where xx is a number specifying the width of the input box. Try starting with the number 25 and work from there… (remember to include the quotes).

    Hope this helps!

  3. 3. Comment by Mikael
    on 2006-03-26 @ 2.21 am · Quote #10 ·

    I have installed it as the readme states, and the css and the php into my theme folder, and activaded it. Nothing happends. I use the blix-theme, and it calls the two functions in header and footer as stated. And livesearch is enabled in the options via the webinterface.
    Any suggestions?

  4. 4. Comment by Constantinos
    on 2006-03-26 @ 3.38 am · Quote #11 ·

    It looks like you didn’t replace the searchform.php file in your theme. Or if you did place it in your theme directory, then your theme must not be using it.

    If that is the case, then you need to find the file where the search form is inserted (navigation file maybe?) and replace the entire section (enclosed in <form> tags).

    The section starts with something like
    <form action=...
    and ends with
    </form>

    Delete that whole section, and in its place enter this code:

    <?php include (TEMPLATEPATH . "/searchform.php"); ?>

    If you can’t do that (or don’t want to), then contact your theme designer and ask for the searchform.php file to be properly included. Then installing this script should work just fine.

  5. 5. Comment by Constantinos
    on 2006-04-03 @ 2.10 am · Quote #22 ·

    As a side note, if you have the same problem as the previous poster, make sure when you copy/paste the include line in your theme, that the single quotes are in fact single quotes and not fancy quotes (which they will be if you simply copy/paste the above line).

    What you can do is either type it all out, or simply delete the fancy quotes and type the single quotes.

  6. 6. Comment by DG
    on 2006-04-25 @ 7.03 pm · Quote #78 ·

    Hi,

    I have downloaded livesearch plugin and uploaded the livesearch folder into plugins directory. And also copied searchform.php & .css into theme folder. The plugin is also activated. But nothing happens, when I enter anything to search into the search box. This search is theme deafult.

    After reading your last comment, I have manually copied this code in the sidebar “, as my theme uses search.php & not searchform.php.

    After this, I gets the search box, but after typing search text, nothing happens i.e. the search box remain ideal with the typed text.

    Can yoy please adivce me, why it is not working? I am fed of downloading livesearch plugin. In the past I have downloaded so many time from different place but none of those worked.

    I hope to get something here.

    Regards,
    DG…

  7. 7. Comment by Constantinos
    on 2006-04-25 @ 7.52 pm · Quote #79 ·

    …Can yoy please adivce me, why it is not working? I am fed of downloading livesearch plugin. In the past I have downloaded so many time from different place but none of those worked…

    Ok, I went over your site and found a couple of issues that might be causing this behavior. (Well, one of them is definitely to blame, at least).

    First off, the theme you are using doesn’t seem to be correctly calling the wordpress footer hook. It was stupid of me to require it since there’s an easy way to make it work without that. I’ve modified the files in the above linked archives so they don’t have this requirement, all you have to replace are the livesearch.js file and the livesearch-plugin.php file.

    Now this might fix your issue, but it might not. I noticed that there are a lot of javascripts running on your site, and some of them seem to generate exceptions. Keep in mind that if a javascript that is being loaded on your site crashes, then none of the javascript that came after it will ever execute. So if the above fix doesn’t correct your problem with LiveSearch, then you will need to find the offending javascript (that will have nothing to do with livesearch), and disable it, or fix it!

    I might be able to help you with that, you can go ahead and email me with any questions!

  8. 8. Comment by DG
    on 2006-04-26 @ 5.22 am · Quote #80 ·