Wednesday (06/27/07)
Better-Than-Live AJAX (WordPress-Ready) Search, Version 2 7:38 pm
Just a little less than a year ago I launched Better-Than-Live AJAX WordPress Search. I felt it was time to get back in the swing of things, so I’m now releasing version 2 of the script.
Download
You can download the files here.
The included files are: prototype.js, effects.js, search.js, search.php, and README.txt.
If you used the previous version of the script, you probably don’t need to read much further to figure it out, though I’d recommend that you do it anyway.
What’s new?
There are a few main changes:
- Uses private variables instead of forcing you to search through the whole script to configure things.
- Works around your already-built search form rather than making you code around the script.
- Checks for multiple searches in a row and closes the previous results before starting the next search.
This makes it much easier to set up, and it’s quite easy to use with your own back-end (unlike what some thought with with the previous version, this script will work with any sort of custom back-end search. It is, however, configured for WordPress by default and comes with a pre-made search file.)
How to set it all up.
Lines 19-26 contain all the necessary variables and look something like this:
var form = 'search'; // id of your search form
var input = 'search_input'; // id of your search input field
var results = 'searchresults'; // id of your results div/paragraph/whatever
var x = 'closeresults'; // id of the button/link to close the results
var submit = 'searchsubmit'; // id of the submit button
var sText = 'Better-than-live search.'; // Default value for your search input field. This is for the automatic clearing of the field onClick.
var iUrl = '/indicator.gif'; // url of indicator image
var file = '/index.php'; // url of the backend file doing the actual searching. If using WordPress, there's a 99% chance you should this leave as-is.
Should be fairly straight forward. This makes it much easier to set up, and unlike before, you can now integrate this script with your own search form by simply plugging the IDs into the script. (Note to those updating from version 1: The default values for the form are the same as was required in the previous version, so you should not need to change any of these unless you personally customized the script.)
If you’re using WordPress, I’d advise opening up search.php and replacing yourpath in line three with the path to your WordPress directory. If you already have a search.php in your current theme directory, save and/or rename it (in case you want it back) before uploading the search.php file that game with the Better-Than-Live download to the directory (Note to those updating from version 1: There has been no update to search.php, so there is no need to mess with or change your current file. You can skip this step.)
If you are using a back-end other than WordPress, you will need to create your own file to do the actual searching of the database(s) and return the results. Then simply define the file variable as the path to your search file, and you should be set.
When including the JavaScript files, make sure that prototpype.js is first, effects.js is second, and search.js is last. If you have them in the wrong order, the script will not work as some of these files are dependent on previous ones.
Also note that just like in the first version of this script, the activity indicator image will have an ID of indicator-safari in Safari and just indicator in non-Safari browsers. This is because in some versions of Safari the form elements cannot be altered as much, so you may want to position the indicator differently.
So enjoy, I’d love to see how you use it, and if you have any questions you can drop ‘em in the comments. 
I eat food. I listen to music. I sleep. Sometimes. I drink lots of coffee. I make pretty pictures. I talk to people. I believe in things. I write stuff. I take photographs. I have a laughing addiction. I am human. 
Pretty cool, E. I like how you’re actively updating this.
I’ll be checking this out.
Brilliant, i will try it out!
Thanks.
Hi Eliot Swan,
The search form looks wonderful. I’d love to implement it on the website I’m putting together at http://www.vancouverpoetryhouse/blog/. But I have only the most basic understanding of code, and website programming.
Could you please make an “installation for dummies” in step form?
These are the obvious sort of questions that dummies like myself need answered:
1. Which directories do I put files in? The theme directory? The plug-in directory?
2. Which variables must I fill in to get the search form to work?
3. How do I implement the search form? As a widget? Or can I insert code into the header to make it appear there?
Thanks for developing a great search function. It is far better than any of the live search plug-ins. Good work!
Are there any live examples/demos? Thanks in advance for this!
Thanks Andy, you make Ajax seem easy .. even though I know (just speaking for myself here) it is not
Yes, a demo would be nice…
I’m using it on my blog!
This blog is using a modified version (no submit button), and I have it running at Accidental Procrastination.
Someone had written a step-by-step guide to the previous version of this plug-in. This guide is gone. If anyone has time to post a better-than-live-AJAX guide, it would be much appreciated. The implementation of this plug-in is not fairly straightforward to me.
http://www.elliotswan.com/2006/07/05/better-than-live/
Tutorial for the previous version.
Looks like the search is kind of broken now, no fancy Java Script.
But I am still not able to make it work on my site, a simple write up will be great.
-
mp3 cheap legal download download legal cheap mp3
This is my first post
just saying HI
Hello,
I’m loving the demo at the top of this page and am very interesting in installing this search system on one of my web sites. However, what would be fantastic is if the search could bring up a certain image with each text result that is found. For example:
I search for ‘gardening’ and the result arrives with an image relating to that page.
Would this be possible at all?
Thanks again,
had it working like a charm with prototype v1.5.0_rc0 (thanks for your work, Elliot), but can anyone else confirm you just get a recursion loop if you try and use it with later versions of prototype?
(1.5.1.1, line 1323)
thanks
[…] Elliot Swan放出了第二版的Better Than Live AJAX Search.对易用性做了很大的改进,变量赋值给提取了出来,安装应用到wordpress将更简单,可定制性更强. […]
Want to start your private office arms race right now?
I just got my own USB rocket launcher
Awsome thing.
Plug into your computer and you got a remote controlled office missile launcher with 360 degrees horizontal and 45 degree vertival rotation with a range of more than 6 meters - which gives you a coverage of 113 square meters round your workplace.
You can get the gadget here: http://tinyurl.com/2qul3c
Check out the video they have on the page.
Cheers
Marko Fando
I’ve got an Amazon gift certificate burning holes in my pocket,
and I want to get the most bang for my buck.
Enter the Secret Amazon Web Pages:
http://tinyurl.com/38sojf
This is where you’re going to find the “latest sales, rebates, and limited-time offers” from
Amazon, and you can score some pretty deep discounts if you’re a savvy shopper.
Next, there’s the special Sale link. This is open every Friday, and ONLY on Fridays.
You can find the same good discounts here as you would in hidden Deals, although some
Fridays you can really get lucky and make off like an Amazon bandit - I’ve seen discounts
there as low as 75% off sticker price.
Hi Elliot. Wonderful script you’ve created. I’ve been tinkering with it for a while now, integrating it into a site I’m working on. And it works like a charm, even for a non-guru like myself.
One bug I noticed occurs if the search is submitted with a blank string. The entire page gets spit back out into the results DIV. A weird doubling thing happens.
Is there an easy way to check for this condition (an empty search input) before submission, and then bypass an actual search?
Thanks again for sharing your work.
-mongushu
1. Which directories do I put files in? The theme directory? The plug-in directory?
2. Which variables must I fill in to get the search form to work?
3. How do I implement the search form? As a widget? Or can I insert code into the header to make it appear there?
As Faust said, there is painfully little documentation here! Which is sad, because this is a great plug-in. Kind of useless though, if it can’t be gotten to work. I don’t even know where to begin.
[…] Sökmotor: Jag har definitvt planerat att lägga till en ajax-baserad sökmotor, eftersom den som finns nu är väldigt undermålig. Att kunna söka på bloggen är ju faktiskt en viktig funktion. Den sökmotor jag har i tankarna är Better-than-live som tyvärr saknar bra dokumentation. Har e-postat Elliot Swan om saken så får väl se om han svarar och har något konstruktivt att komma med. Det är i alla fall en väldigt snygg och funktionell widget! […]
[…] Better-Than-Live AJAX WordPress Search v2: Günlüğünüzde AJAX ile hızlı aramalar yapmanızı sağlayan bir eklenti. […]
I have been testing this plugin on the blog I’m making now, but I can’t get it to show more than one result in the search!
Is there anystring I need to modify to show more than one result?
the link to my blog is eoqha.net/podcast
[…] I also spent sometime playing with AJAXed WP and Better-Than-Live AJAX Search. While they’re really cool, they don’t offer the same level of user friendliness. In order to make the two plugins work I had to mess around with the theme, which make ‘em not so portable and may potentially break in the future releases of Wordpress. […]
I’m having a hard time putting the close button inside the div#searchresults. I notice that the Event.observe(x, ‘click’, this.close, false) is giving me a hard time if the a#closeresults is not there right at the begining. My intention was to triggered it via the search.php output, since putting it in the hidden div#searchresults by default destroys it once the search appear.
I tried to move the Event.observe line from the init: instance to the end of the complete: instance, and it doesn’t work either.
I don’t get why you would want the close button to be outside the search box by default, it doesn’t makes much sense to me as everything else, popups and windows, generally has their close button inside them…
Help?
[…] Better-Than-Live AJAX WordPress Search v2: Günlüğünüzde AJAX ile hızlı aramalar yapmanızı sağlayan bir eklenti. […]
Oh, and did not know about it. Thanks for the information …
Yeah, what I did was something similar to what you have done on your own blog, but I am putting the close link and the searchresults hidden div in an empty div that will act as the background of the search section… it works!
Thanks for your efforts for that plugin, much appreciated…
[…] Better-Than-Live AJAX WordPress Search v2 “Just a little less than a year ago I launched Better-Than-Live AJAX WordPress Search. I felt it was time to get back in the swing of things, so I’m now releasing version 2 of the script.” […]
Hi there mate,
does this WorPress ready means that it only works for wordpress, or can i integrate it into a normal php site also?
@Gerben: It will work for any php site with search, it’s just set by default to work for WordPress. If you look in the article, it shows a few lines with variables that you can set–one of these is for the location of the file doing the searching. I’ve included one for WordPress, but you can change it to use whatever you’d like.
okay thanks for the quick response
were trying to get this to work with code igniter but it wont work..
any experience on this?
I don’t… Just make sure that the search file is actually returning the results, because whatever the search file returns when it is done is what the script will show via the ajax.
okido, well give that a try
BTW,
this is our code:
in head:
js/prototype.js" type="text/javascript">
js/effects.js" type="text/javascript">
js/swfobject.js" type="text/javascript">
the form:
/zoeken/" id="search">
and the div where results will come:
will it work like this when ive specified the correct search php file in the JS?
Thx,
G
the comment above is kind of !@!@ up
like this then:
js/prototype.js” type=”text/javascript”>
js/effects.js” type=”text/javascript”>
js/swfobject.js” type=”text/javascript”>
/zoeken/” id=”search”>
all of course in the right places in the template
just mailed you, the comment code doesnt show all..
[…] Better-Than-Live AJAX WordPress Search v2 “Just a little less than a year ago I launched Better-Than-Live AJAX WordPress Search. I felt it was time to get back in the swing of things, so I’m now releasing version 2 of the script.” […]
I removed the include(”yourpath/wp-blog-header.php”); line, because I wanted to show results on the sidebar.
Okey, I was found the solution: simply specify the full path (xy.com/js/effect.js) of js files in header.php.
[…] Better Than Live WordPress Search - Adicione uma busca no seu Wordpress utilizando animações e efeitos em Ajax. […]
Why aren’t simple questions like “where do we put the files” being answered?
It seems only programmers can use this which is a real shame.
A real shame? Are you serious? This whole thing, the whole coding behind Better-Than-Live AJAX is a shame because you need to know how WordPress themes works and basic PHP and file structure?
Wow…
You didn’t read what I wrote did you?
Funny, you took the time to write that but not answer the question I and others have.
I answered; if you don’t know the basics of WordPress filestructure, I don’t think that this for you… You can put the files wherever you want; you’ll need to link to them using the adequate coding for javascripts in the header of your website. Should I be more specific?
Thank you.
I can get it to preform a search but it sends me to a new page to view the results.
@Me: If you’re going to troll, please at least use a real name and email address.
Laurent is correct, this is not a plugin, so some know-how is required to get it running. Your problem actually has been solved and documented quite thoroughly, however. A simple search through the comments on this post and the other one that should have been linked to several times I believe, and you should find your solution quite quickly.
Thanks for trying it out!
No need call me names, I’m just looking for some help. I’m not alone as a few people have asked for a Dummys step by step guide.
Which one do we use? http://www.elliotswan.com/2006/07/05/better-than-live/ or the one on this page?
I’ve tried both and neither work for me.
Maybe I’m not using the right version of wordpress (2.1)
I don’t give out my real email address because of spam bots but I will email it to you if you need it.
I forgot to say that I don’t expect free help here, I don’t mind paying for your help.
Wasn’t trying to call names, simply point out that it’s common curtsey to at least use a real name when criticizing others’ work, otherwise it looks like you have no purpose in doing so. As far as email addresses go, most blogs (especially wordpress ones) don’t publish them, so spam bots is shouldn’t need to be a concern–email addresses simply add credibility to your post.
The script on this page is the more recent one, so you’ll want to use this one. When people experience the problem you’re having, normally it’s because prototype.js/effects.js isn’t being pulled before the search script. I sent you to the other page and suggested reading through the comments because this has been mentioned thoroughly in them, and at least one other person has written an article on specifically how to solve your problem–an article that you should be able to find by checking those comments.
Or did you try that and it still doesn’t work? We also can’t really help any further than this without a link.
Ty…….
Hello & thanks for sharing this plugin.
I followed the necessary steps (i think) but still i don`t get the search to work at all.
When i perform a search for the word “alley” f.ex i get this url, “ahjaa” being my root folder with the wp installation in it: http://localhost/ahjaa/%3C?s=alley
Where could the mistake be?
i could also upload it to make it more clear…
if anyone could help… would be much appreciated.
i read all comments and looked for more documentation but there is none,
previously posted links to more information are dead.
Thank you!
just subscribing to follow up posts here…
Some more information:
Trying to install on Version 2.5.
I copied all files that came with the better-than-live-v2.zip into my theme folder (= wp-content/themes/xyz/) and then altered them there.
1. “First, we of course need to get ourselves a form” —-> The necessary searchform is inserted into a widgetized sidebar using the “text” widget.
2. “We’ll also need a div to show the results in” —-> I did that !
3. “For that nifty little close button, we need our close link” —-> I did that !
4. (inside search.php): “replace yourpath to header.php” —- I did that, this is my path now: http://localhost/ahjaa/wp-blog-header.php
From what i understand this should already produce a working search right?
I really hope someone can draw some conclusions from the URL that is produced when performing the search (see my other post above).
Again: Thanks for any help!
Hi there, I’m trying this clean search script in Paris Na Linha (still in beta).
In Safari & Firefox everything’s ok (I still need some css redesign)
In IE6, the search leads to http://www.parisnalinha.com/index.php?s=my+search
Any idea of what’s wrong ?
brilliant code, thanks for sharing, i love them!
I share Me’s confusion. This is absolutely the best search box I’ve seen, but coming in as an average Wordpress user I am used to a standardized plugin installation explanation, and was lost until I got deep into the comments on the second version page. I think the confusion comes from the fact that you wrote for one audience, but there’s this other plugin audience out there wandering in and trying to use your code. (I put all the files in my plugin directory and looked for a new menu to appear … don’t laugh, I use Wordpress as a simple tool to do what I love to do, which is not javascript).
If you made this for people more advanced than me, then ok. But if you want non-coding people to use it (and link to it, and donate for it), all we need is something like:
step 1: open file.js and change lines 24-33 in this way.
step 2: upload to wordpress/theme.
step 3: in styles.css create a or whatever.
thanks for your work.
awesome…