LiveSearch 
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
- v1.4 – Plugin works with WordPress 2.5 (thanks to the Korean Club despair blog) and is now also hosted on the WordPress Plugin Directory
- v1.3 – Plugin now completely drag-and-drop, no need to copy any files anywhere. Minor bug fixes/improvements in javascript code. Now hosted on Google Code
- v1.2 – Plugin widgetized, minor javascript changes
- v1.1 – Fixed potential javascript errors
- v1.0 – Original plugin, LiveSearch code copy/pasted directly without modifications
For more detailed explanations of the changes in each version, follow the series links in the sidebar.
1. Comment by olivier
on 13 Feb 2007 @ 1:41 pm
Hi again, i’m finalizing the customisation of the research form, but I can’t change the border color… still in grey !
where can I find this info ?
Another questions:
1.something is funny, but I change the tag “start typing to search” on line 53 in livesearch-plugin.php, but it is still displayed… any idea ?
2.clicking on “close(esc)” doesn’t return an empty frame, but keeps the info previously typed. Is it possible to clean and go back to “start typing to search” ?
2. Comment by Constantinos
on 13 Feb 2007 @ 2:47 pm
[quote post=”31″]Hi again, i’m finalizing the customisation of the research form, but I can’t change the border color… still in grey ! where can I find this info ?[/quote]
Have u tried changing the border color property in livesearch.css for #LSResult?
[quote post=”31″]something is funny, but I change the tag “start typing to search†on line 53 in livesearch-plugin.php, but it is still displayed… any idea ?[/quote]
You should not change the value in livesearch-plugin.php. Instead, in your WordPress admin site, go to Options / LiveSearch. There you’ll find an option to change that text as it’s stored as a preference. Changing the string in livesearch-plugin.php simply changes the default text that gets applied when the plugin is first installed.
[quote post=”31″]clicking on “close(esc)†doesn’t return an empty frame, but keeps the info previously typed. Is it possible to clean and go back to “start typing to search†?[/quote]
Yes. This is untested because I can’t check it on a live server right now, but doing what you want should be pretty simple. Open up livesearch.js.php, find the function called closeResults(), and append this code to the end of it:
document.getElementById("livesearch").value = "";
document.getElementById("livesearch").blur();
The first line should clear the contents of the search box, the second should give the blur command so the textbox can know it’s been taken out of focus and it can reset the default text and color in the text box.
Hope this helps
3. Comment by Constantinos
on 13 Feb 2007 @ 3:33 pm
[quote post=”31″]Yes. This is untested because I can’t check it on a live server right now, but doing what you want should be pretty simple. Open up livesearch.js.php, find the function called closeResults(), and append this code to the end of it:
document.getElementById(“livesearch”).value = “”;
document.getElementById(“livesearch”).blur();[/quote]
Actually scratch that, it will completely destroy the plugin. Instead try the following:
Add this function after the closeResults function in livesearch.js.php:
then locate the call to closeResults() (about 19 lines above the function declaration), and change closeResults() to resetSearch().
I can’t guarantee that this will work perfectly, but it shouldn’t break the plugin. The trick is getting the onblur command to execute. If it’s not happening, you can replace the last two lines of the new javascript function with:
Let me know how this works out.
4. Comment by olivier
on 14 Feb 2007 @ 10:06 pm
[quote post=”31″]Add this function after the closeResults function in livesearch.js.php:
function resetSearch() {
if (!hasSearchBox) {
return;
}
closeResults();
document.getElementById(‘livesearch’).value = ”
document.getElementById(‘livesearch’).blur();
}
then locate the call to closeResults() (about 19 lines above the function declaration), and change closeResults() to resetSearch().[/quote]
This works perfectly on the system, no need to insert the lastest lines.
I just have problems with colors… difficult to change the very first border where you can write the text to search…
Anyway, thanks a lot for your answer and your plugin !
Olivier
5. Comment by Constantinos
on 14 Feb 2007 @ 10:14 pm
[quote post=”31″]I just have problems with colors… difficult to change the very first border where you can write the text to search…[/quote]
If you’re talking about the border of the searchbox, there’s no rule for it in the livesearch.css file. You can add one in livesearch.css:
#livesearch {
border-color: #ff0000;
}
Glad I could help.
6. Pingback by » Blog Archive » A propos de ce blog
on 26 Feb 2007 @ 12:54 pm
[…] LiveSearch version 1.2. Permet de faire une recherche en direct, écrit par Constantinos Neophytou. http://www.cneophytou.com/2006/03/26/livesearch/ […]
7. Comment by Andrew
on 9 Mar 2007 @ 4:43 am
Would you be so kind as to provide the code you used for implementation of the live search feature for this website, and not wordpress? I’m trying to implement a similar live search on my site and am having difficulty finding a script that I can integrate with my PHP/MySQL driven site. Thanks!
8. Comment by Constantinos
on 9 Mar 2007 @ 7:49 pm
Actually, I’ve created a project at google code to hold this plugin, and as soon as I can do the write-up and create the archive, I will be posting about version 1.3…
The url is
http://code.google.com/p/livesearchwpplugin/
The code is all there. What you need is the
livesearch.cssfile, the javascript file, and the approprialte HTML in your code (a sample of which can be found insearchform.php.Then you would need to create your own version of the
livesearch.phpfile, which should actually perform the search and display the results in the appropriate HTML markup.Then you’ll need to modify the javascript file a bit. First remove the first line,
require("../../../wp-blog-header.php");
then replace the value of the
livesearch_submit_urlvariable with the appropriate url. Then also search for any other<?phptags in the javascript file, and replace the contents with some static values.You can find all of the files I’m talking about here:
http://livesearchwpplugin.googlecode.com/svn/trunk/livesearch/
It’s an involved process, but not entirely impossible. Most of it is easy fixes, and I can generate those files for you, but the
livesearch.phpfile you’re gonna have to figure out by yourself because it entirely depends on your setup. That’s where everything happens…9. Pingback by Wordpress-Plugins – Empfehlungen (1) - aj82.
on 11 Mar 2007 @ 2:59 am
[…] LiveSearch […]
10. Comment by Fabricio Vasselai
on 7 May 2007 @ 4:29 am
Dear friend,
Congratulations for that great piece of work!!!
If I am not mistaken, your plugin already has the mod to search inside posts, not only their titles. It works like that in my blog, at least.
I got thinking why do not you send that plugin to WordPress Database? You really really should!
Thank you for the plugin and for your attention.
Best regards,
FABRICIO
11. Pingback by Die liebsten Wordpress-Plugins » BloggingTom
on 7 May 2007 @ 12:37 pm
[…] LiveSearch LiveSearch zeigt durch den Einsatz von Ajax schon beim Tippen des Suchstrings erste Ergebnisse an und soll die Suche so einfacher machen. Verwirrend allerdings, dass das Plugin nicht immer alle Treffer findet, so seinen Zweck nicht wirklich erfüllt und darum bald rausfliegen wird. […]
12. Pingback by Wordpress-Plugins - Meine Favoriten - aj82.
on 19 May 2007 @ 3:56 am
[…] LiveSearch Dieses Plugin integriert eine Livesuche in das Weblog. Der Unterschied zur Standardsuche ist, dass Ergebnisse schon direkt beim Tippen (ähnlich wie Spotlight in Mac OS X) angezeigt werden. […]
13. Comment by Zdeto
on 4 Oct 2007 @ 4:54 pm
Hi,
I’ve been trying to use your livesearch plugin. So I made an local installation on WP 2.3 on a windows/apache/php/mysql platform. Everything is working just fine.
But when I moved the wordpress to my hosting server, installing WP 2.3 and the same plugins, the livesearch stopped working.
I tried with several different plugins and all returns no results when searching.
Trying to debug the problem I managed to see a little bit of code that is not working right on my server, but it’s working fine on local machine. It’s about the file livesearch.php.
The $posts is 0 when it should have data in it.
Also I tried with this plugin:
http://1stein.org/2007/09/11/live-search-popup/
Where the code that actually makes the search is very similar with the previous one.
$posts_per_page = 10;
global $table_prefix;
require('../../../wp-blog-header.php');
?>
0) {
foreach ($posts as $post) {
start_wp(); ?>
<a href="" rel="bookmark" title="Permanent Link: ">
<?php
}
echo '';
} else {
echo 'No Results.';
}
}
?>
Also, with this I get no results.
I am not able to spot what would be the difference between the instalation on local and the one on the remote hosting server, both have the same plugins, the same posts…
A little help please? 😉
Thank you!
14. Comment by nico
on 3 Nov 2007 @ 8:30 pm
Hi,
wicked piece of work, thanks for sharing.
I use to run your plugin on a WP 2.2.3 based website, no problem.
i have upgraded WP to 2.3.1, and the plugin just doesnt work anymore.
Do you know of any issue with WP 2.3.1 ?
Thnaks for you help,
nico
15. Comment by Ed
on 21 Dec 2007 @ 6:04 pm
I’m having the same problem as Zdeto, no results are being returned on the live search, though if I click on “More results” the results appear fine as it would before the plugin was installed. I’m running WordPress 2.3.1 on Apache, PHP 5.2.3 and MySQL 5.0.24
Any clues on how to solve this problem?
Cheers,
Ed
16. Comment by Harry
on 10 Apr 2008 @ 1:21 am
Hey it’s not even working on your site, i entered a few letters, typed in a few terms nothing is coming up im using FF. If it doesn’t work on here then i guess theres no point in me downloading it? I’ll check back to see if anyone solves this problem.
17. Comment by brian
on 30 Apr 2008 @ 7:31 pm
Hi mate,
good piece of coding you have here.
I uploaded it on a site and it seems that IE doesn’t like it. It works well in FF and safari but IE doesn’t have anything appear….
Do you have a clue about this problem.
I run wp 2.5 with a basic theme.
cheers dude 🙂
18. Comment by baron
on 11 May 2008 @ 5:27 pm
hi there .thanks for plugin:
Does anybody know if tis script is compatible with WordPress 2.5.1 ?
Thanks in advance for any help on this!
regards
19. Comment by Constantinos
on 22 May 2008 @ 1:03 am
I use the latest wordpress, and it seems to work fine.
20. Comment by Ralph Schumacher
on 24 Dec 2009 @ 12:37 am
Thanks a lot for this nice PlugIn!
21. Comment by SugarCRM Customization
on 3 May 2011 @ 12:45 pm
Cool Plugins .. thanks alot