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 Noel Jenkins
on 16 Mar 2006 @ 9:32 pm
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. Comment by Constantinos
on 16 Mar 2006 @ 10:38 pm
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. Comment by Mikael
on 26 Mar 2006 @ 2:21 am
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. Comment by Constantinos
on 26 Mar 2006 @ 3:38 am
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. Comment by Constantinos
on 3 Apr 2006 @ 2:10 am
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. Comment by DG
on 25 Apr 2006 @ 7:03 pm
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. Comment by Constantinos
on 25 Apr 2006 @ 7:52 pm
[quote comment=”78″]…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…[/quote]
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. Comment by DG
on 26 Apr 2006 @ 5:22 am
Hi,
I have replaced the two files from this link. But it still does not function i.e. search window is displayed but nothing happen after typing search text.
You talked about javascript, can you advice me, which is mischievous? I will disable that. Because I want livesearch running.
As right now, I am placing some good stuff for testing purpose and later on will remove, what is not required.
Regards,
DG…
9. Comment by DG
on 26 Apr 2006 @ 5:35 am
[quote post=”31″]You talked about javascript, can you advice me, which is mischievous? I will disable that. Because I want livesearch running.[/quote]
I didn’t mean livesearch, but other stuff. Livesearch will remain as the only search form.
10. Comment by Constantinos
on 26 Apr 2006 @ 8:31 am
[quote comment=”80″]You talked about javascript, can you advice me, which is mischievous?[/quote]
Actually, it looks like the exception is being caused by a debug program (a call to Window.writeDebug, or an attempt to access Window.writeDebug).
Consider downloading Firefox, and using the Web Developer extension. It has a javascript console that will greatly help you in tracking down any errors that might happen when your page loads.
11. Comment by m0n
on 3 May 2006 @ 1:14 am
Just wanted to thank you for the LiveSearch plugin. I have tried several other methods for implementing LiveSearch functionality, but to no avail. Your plugin did the trick — thanks!
Cheers,
m0n
12. Comment by Paul Caplan
on 21 May 2006 @ 3:01 am
Thanks for the plug-in. After many attempts to get Livesearch working via other means, installed yours and great!
13. Comment by DG
on 24 May 2006 @ 7:12 pm
Hi,
I am still not able to use Liversearch on my site. Can you please advice. I am using connections theme.
Regards,
14. Comment by Constantinos
on 24 May 2006 @ 7:53 pm
Well, like I’ve said before your site is using a lot of javascript. An error in any of that code could be breaking LiveSearch completely. It will take some editing and probably some basic javascript skills to debug that. Think you can handle it?
The first thing you can do, is open your footer.php file, and somewhere at the end (before the </body> tag if there is one) enter the following code:
<script type="text/javascript">
liveSearchInit();
</script>
(note that the quotes in the code are ‘smart quotes’, you need to type them out and not copy/paste this segment).
And you can double check that this line shows up on your site by viewing the source code. If that doesn’t work, you’ll need to open the livesearsh.js file, and insert some
alert()commands in the liveSearchInit function. If the alert boxes pop up when you first load the page and the livesearch box still doesn’t work, then the problem might be in how the LiveSearch plugin interacts with the rest of the scripts on your site.If the alert boxes do not pop up, then the LiveSearch code is not even being loaded.
Let me know if any of this works.
15. Comment by Gianko
on 27 May 2006 @ 1:57 am
Hi, It doesn’t work for me neither…
Can you please help me…?
The form is in the sidebar of the single post pages.. it this commented out (because it was not working 🙁 )
16. Comment by Constantinos
on 27 May 2006 @ 3:22 am
[quote comment=”255″]Hi, It doesn’t work for me neither…
Can you please help me…?
[/quote]
Hmm… It looks like you found a small bug in the code. Your WordPress installation is not the same as your ‘home’ page, as your home is the root directory, whereas your WordPress is installed in the /WP/ directory. As a result, the plugin is not finding the javascript file because it’s looking in the wrong folder.
You can try to fix it, but even if you do I’m not sure the searching part would ever work. Did you ever have a search bar on your site that worked? I can help you with this if I see the code for that… Email me.
17. Comment by Gianko
on 27 May 2006 @ 10:01 am
Yeah.. that was the problem.. it’s now working!!!
Thanks a lot.
18. Comment by Mo Hoyt
on 1 Jun 2006 @ 2:42 pm
I can’t seem to get this plugin to work on my wordpress, when I load the page I get the Javascript error:
Object (result of expression liveSearchInit) does not allow calls.
http://www.mohoyt.com/index.php/
And when I begin searching, I get the error:
Object (result of expression liveSearchStart) does not allow calls.
http://www.mohoyt.com/index.php/
Any idea what’s goin on?
Thanks a lot
19. Comment by Constantinos
on 1 Jun 2006 @ 6:23 pm
[quote comment=”264″]I can’t seem to get this plugin to work on my wordpress
…
Any idea what’s goin on?
[/quote]
Yes. It looks like that you defined the Blog address URI (under wordpress options) to be
http://www.mohoyt.com/index.php
This is wrong. Your blog address cannot contain a file name, it must end with a directory and no trailing slash.
I’m guessing this is because of the way you have your splash screen set up. There is one or two things you can try to work around this..
Open the plugin file (livesearch-plugin.php) and locate lines 24 and 28. They should be the only lines where
bloginfo('home');occurs.Delete both those occurences (including the semicolons), and right before the previous
<?enter (on both lines) the base url of your site:http://www.mohoyt.com(note the lack of the trailing slash as well as the lack of any leading/trailing spaces), and save the file.
Furthermore, it looks like you had made some previous attempts to load the livesearch code manually? You should open your header file and remove any references to old livesearch scripts.
Let me know if any of this helps.
20. Pingback by Welcome to Mango! — Mango for Canvas Archive
on 15 Jun 2006 @ 5:19 am
[…] LiveSearch […]
21. Pingback by Live search working! at Circle Six Blog
on 28 Jul 2006 @ 9:01 am
[…] Live search working! Published July 28th, 2006 AsidesI know it’s a little javascript heavy, but I wanted to get livesearch working for a little while. I had to scrap the K2 code and use this plugin. And I had to make some minor modifications to the javascript file to get it working in Firefox on my mac and I haven’t tested it in IE yet (which we all know won’t work), but I’m happy to see it working for now. […]
22. Comment by Lysiane
on 5 Aug 2006 @ 8:50 am
Hi!
I would like to get LiveSearch working but despite following the first troubleshooting tips (check for the hook calling, pase the code indicated where the search form should be…).
But, like Gianko, I have my homepage and my WP install in seperate directories. Is there a way to tell the plugin where to look so one can still get to use LiveSearch even if they have kept things seperate ?
http://urbangriffin.com/unjour/blog/
Thank you!
23. Comment by Lysiane
on 5 Aug 2006 @ 9:07 am
Oh, I found your explanations in the later comments! It’s working. Thank you again for a great plugin. 😀
24. Pingback by www.brt12.eu » Archiwum bloga » Wtyczki do WordPress
on 29 Aug 2006 @ 4:02 pm
[…] LiveSearch – (screen!) […]
25. Comment by Steven
on 25 Sep 2006 @ 11:16 pm
First of all I really like Livesearch! But now I ran into a small (?!?) problem. I have my WordPress installation on a different location then the actual blog:
http://backend.domain.ext/blogname
http://blogname.domain.ext
I already tried the trick with deleting both occurences of bloginfo(‘home’); and I inserted http://backend.domain.ext/blogname before the
26. Comment by Portrait From Photo
on 3 Oct 2006 @ 11:11 am
I’m planning to create a blog through WP which is mainly about paintings and works of art. Do you think this plug-in would work well for me?
I tried the plug-in in my other blogs and I have observed that it behaves differently as I hop from one browser to another. Should I be concerned about that?
John
27. Comment by ia
on 6 Oct 2006 @ 11:09 pm
I can see the Livesearch results pane, but it isn’t returning any results for *anything*. Can you help out? I already managed to get it working on another WordPress installation but this time I’m having problems. =(
28. Comment by Constantinos
on 7 Oct 2006 @ 8:37 am
I’d love to help, but first I need to know what url the problem is appearing under so I can look at the problem and try to debug. The site you currently linked to (stellify.net) appears to have livesearch return results, though the keyboard navigation isn’t working. Maybe you don’t have the most up-to-date javascript and css for it?
If you give me the url where livesearch doesn’t return any results, I’d be happy to take a look.
29. Comment by 800A
on 28 Oct 2006 @ 12:54 am
i just installed your plugin but livesearch dont work.It return always “No result” 🙁
Can u help me?
30. Comment by Jane
on 29 Oct 2006 @ 10:45 pm
I get this error in Internet Explorer 7.0
document.forms.searchform.s.value.
31. Comment by s
on 24 Nov 2006 @ 6:34 pm
hi i’ve downloaded your plugin but its not working. there’s no error etc. just nothing happen.
hope anyone here can help me.
by the way i’m using wp 2.0.4 and a modified theme.
32. Comment by usws
on 8 Dec 2006 @ 9:33 am
Live search is just great but i would just like to ask if it does anything to the database or wordpress config file. It used to work on my site but after some server and database changes, it doesn’t respond anymore. Even clicking enter doesn’t work. I’ve reuploaded the files and activated the plugin again but it still doesn’t work. Could you help?
33. Comment by Constantinos
on 8 Dec 2006 @ 11:24 am
[quote comment=”470″]Live search is just great but i would just like to ask if it does anything to the database or wordpress config file. It used to work on my site but after some server and database changes, it doesn’t respond anymore. Even clicking enter doesn’t work. I’ve reuploaded the files and activated the plugin again but it still doesn’t work. Could you help?[/quote]
Hmm.. no, the database would not cause such a problem. It seems you’re suffering from a javascript bug… Either javascript execution dies at some point and liveSearchSubmit() is never called (and neither is the liveSearchStart() function), or liveSearchInit() fails at the beginning of the script.
The quick and dirty way of checking this is to open the
/plugins/livesearch/livesearch.jsand insert two alert calls: one at the beginning of liveSearchSubmit(), and one at the beginning of liveSearchInit(), and then refresh your site and try to type something in the search box and then hit enter.If neither of them come up, then you have some javascript issue that’s causing the browser to completely stop execution of javascript on your site. If only one of them comes up, then you need to dig a bit deeper into the other problem by sparkling some more alert calls everywhere to determine where the script crashes exactly…
Hope this helps, though it is quite vague. From what I saw on your site, I couldn’t identify the problem myself, sorry.
34. Comment by usws
on 8 Dec 2006 @ 8:19 pm
[quote post=”31″]The quick and dirty way of checking this is to open the /plugins/livesearch/livesearch.js and insert two alert calls: one at the beginning of liveSearchSubmit(), and one at the beginning of liveSearchInit()[/quote]
Thanks for the quick reply but i don’t really know how to insert alert calls, could you provide me with the code maybe. Sorry for being a total newbie at this.
Thanks, really love this plugin when it was working.
35. Comment by Constantinos
on 8 Dec 2006 @ 10:06 pm
[quote post=”31″]Thanks for the quick reply but i don’t really know how to insert alert calls, could you provide me with the code maybe. Sorry for being a total newbie at this.[/quote]
Well, it’s kinda hard to give you a script that will locate the problem on your server, I’m not a javascript wiz, I just know enough to get by 🙂
If you open the
livesearch.jsfile, you’ll see a bunch of lines that start withfunction xxxxxx() {where xxxxxx is the function name. Look for the ones mentioned in my previous comment, and right under those corresponding lines enter this piece of code:
alert('test1');and change it to ‘test1’, ‘test2’ etc etc so you know which one goes where. Or even use the name of the function it’s in instead of ‘test’. Then save the file to your server, refresh your site a couple of times so you make sure the new javascript is fetched by the browser, and you should start seeing javascript boxes pop up containing the strings you entered. If some of them don’t come up, you’ll know where the problem is 🙂
Alternatively, and this is what I should have probably recommended to begin with, try to figure out what plugin you installed right around the time livesearch stopped working. Try disabling each of your other plugins one by one, and refreshing your site to check if livesearch is working, and work by the process of elimination to find what the culprit is. And once you identify what plugin is breaking livesearch, let me know and I’ll check it out and see about fixing it… Probably a much better approach 🙂
36. Comment by Constantinos
on 8 Dec 2006 @ 10:07 pm
And I use WAAAy too many smilies in my comments… ah well.
37. Comment by usws
on 8 Dec 2006 @ 11:31 pm
Because i have the same problem with extended live archive (also started after the server change), i read their guide and the problem might have something to do with permalinks. The pages on my site use this format ->
“http://usws.isgreat.org/index.php/pageorpostname” – Do you think this could be the problem.
Anyhow, i will definitely try out your solution. Thanks for the help so far!
38. Comment by usws
on 9 Dec 2006 @ 12:22 am
Should i change the code in livesearch.php where it states where it searches by putting in “/index.php” since my permalinks have changed. This might not be the main reason why the plugin’s not functioning but even if it does, i think it will search in the wrong place.
Thanks again!
39. Comment by usws
on 9 Dec 2006 @ 12:23 am
Sorry, it’s suppose to say (without the spaces) before the /index.php
40. Comment by Constantinos
on 9 Dec 2006 @ 3:10 pm
Yes, I think that this would cause problems with livesearch. However the fact that hitting ‘enter’ doesn’t do anything tells me that the javascript is still active, only for some reason the initialization function is not being called when the page loads… Actually the version of the plugin I’m using on my site takes some steps to rectify javascript problems caused by some other plugins mis-handling the onload functionality, but it doesn’t completely eradicate the problem. I’ve been meaning to make some more changes to the plugin which would allow for simpler installations before re-packaging it and calling it a newer version, but given how busy I am right now that might take a while.
Check back tomorrow, I’ll try to upload a newer version of livesearch and you can give that a go. Your current stylesheet will still work with it.
41. Comment by usws
on 9 Dec 2006 @ 10:52 pm
Thanks for all your help but i’ve finally found the problem… Just a little background first. Before i used this plugin, i was trying to implement the one used in the K2 theme. I followed all the steps and had put onload=”liveSearchInit()” in the body tag. After failing to make that one work, i found this Livesearch plugin but didn’t remove the onload command. Only later did i remove it but i did not test if the livesearch works.
So that’s the solution, put the onload=”liveSearchInit()” inside the body tag! Thanks once again!!
42. Comment by Constantinos
on 10 Dec 2006 @ 8:44 pm
[quote comment=”480″]So that’s the solution, put the onload=”liveSearchInit()” inside the body tag! Thanks once again!![/quote]
That would be caused by a javascript problem which prevents the incorporated onload event to be overwritten, most probably because of another plugin. The next upgrade should take care of some of these cases.
43. Comment by Miejsca
on 22 Dec 2006 @ 5:20 pm
Would you please give me a xmas gift and have a look @ my page — I guess I did everything allright, yet it fails to work “live”
http://service.miejsca.org/
44. Comment by Constantinos
on 22 Dec 2006 @ 5:33 pm
[quote comment=”484″]Would you please give me a xmas gift and have a look @ my page — I guess I did everything allright, yet it fails to work “live”[/quote]
It seems that the javascript file is not where it should be… Where did you upload it? It needs to be uploaded in a folder called ‘livesearch’ under the wp-content/plugins/ folder.
I.e. when you try to load the page:
http://service.miejsca.org/wp-content/plugins/livesearch/livesearch.js
you should see the contents of the javascript file. Instead I get
“Nie znaleziono !”
which I’m assuming means not found?
45. Comment by Miejsca
on 22 Dec 2006 @ 5:39 pm
OK, I got rid of some errors (mine), and it now works. Sort of. I fails to find anything: “no results” what ever I write.
46. Comment by Mo Hoyt
on 8 Jan 2007 @ 1:03 am
Hi, Thanks for the help earlier with getting the plugin to work.
Instead of changing those few things concerning the splash page, I decided to move the whole wordpress insallation to a proper subfolder. The problem is, when I begin to type words etc. into the search box, the JavaScript Console (in Safari) shows this:
TypeError – Undefined value
http://www.mohoyt.com/blog/wp-content/plugins/livesearch/livesearch.js
Any ideas on what is going wrong now? It can’t possibly be the same thing now, or can it?
47. Pingback by My 5 Favorite Blog Plugins » Online Marketing Blog
on 9 Jan 2007 @ 7:52 pm
[…] Live Search – Update your search box to show results as the user types. […]
48. Comment by olivier
on 12 Feb 2007 @ 9:54 pm
Hi, and thanks for this easy to use plugin !
This looks very nice, and is also easy to customise. But I have a problem with the last row : clicking on “More results” brings me to a error page “
Not Found
The requested URL /index.php was not found on this server”
Any idea ?
Thanks a lot
49. Comment by Constantinos
on 12 Feb 2007 @ 10:20 pm
[quote post=”31″]But I have a problem with the last row : clicking on “More results†brings me to a error page “
Not Found
The requested URL /index.php was not found on this serverâ€Â[/quote]
Hm. Try this: Open up livesearch.php. The last line should contain something like:
<a href="/index.php?s=…
change it to:
<a href="<?php bloginfo('url'); ?>/index.php…
I’m not sure if that will work, but it should. Let me know how it works out…
50. Comment by olivier
on 13 Feb 2007 @ 11:33 am
Hi Constantinos,
That rocks !
Thanks for your fast answer and again very nice plugin !
Olivier