Elliot Swan

Welcome to my live redesign. Codename, Tumbl3. Grab the feed.

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. swan

  • AdamD June 27th, 2007 @ 10:56 pm (#)

    Pretty cool, E. I like how you’re actively updating this.

  • Noah Everett June 28th, 2007 @ 7:45 am (#)

    I’ll be checking this out.

  • Coder June 28th, 2007 @ 12:02 pm (#)

    Brilliant, i will try it out!

  • Elliot Swan June 28th, 2007 @ 2:10 pm (#)

    Thanks. :)

  • Faust July 30th, 2007 @ 12:10 pm (#)

    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!

  • Aaron August 3rd, 2007 @ 8:20 am (#)

    Are there any live examples/demos? Thanks in advance for this!

  • Web Designer August 7th, 2007 @ 8:02 am (#)

    Thanks Andy, you make Ajax seem easy .. even though I know (just speaking for myself here) it is not

  • Mike August 14th, 2007 @ 5:51 am (#)

    Yes, a demo would be nice…

  • hubs August 14th, 2007 @ 10:29 am (#)

    I’m using it on my blog!

  • Elliot Swan August 14th, 2007 @ 12:07 pm (#)

    This blog is using a modified version (no submit button), and I have it running at Accidental Procrastination.

  • Faust August 14th, 2007 @ 12:20 pm (#)

    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.

  • lost101 August 15th, 2007 @ 4:06 am (#)

    http://www.elliotswan.com/2006/07/05/better-than-live/

    Tutorial for the previous version.

  • santm August 21st, 2007 @ 2:58 am (#)

    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.

    -

  • download legal cheap mp3 August 26th, 2007 @ 10:29 am (#)

    mp3 cheap legal download download legal cheap mp3

  • jameswillisisthebest September 8th, 2007 @ 1:30 pm (#)

    This is my first post
    just saying HI

  • RA September 10th, 2007 @ 4:27 am (#)

    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,

  • n September 10th, 2007 @ 5:30 am (#)

    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

  • My Habari September 23rd, 2007 @ 10:15 am (#)

    […] Elliot Swan放出了第二版的Better Than Live AJAX Search.对易用性做了很大的改进,变量赋值给提取了出来,安装应用到wordpress将更简单,可定制性更强. […]

  • markofando October 2nd, 2007 @ 8:27 am (#)

    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

  • vadaslush October 4th, 2007 @ 8:00 pm (#)

    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.

  • mongushu October 14th, 2007 @ 10:20 pm (#)

    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

  • Henrik Sundholm November 2nd, 2007 @ 5:02 pm (#)

    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.

  • Bloggnyheter | Henrik Sundholm November 2nd, 2007 @ 8:14 pm (#)

    […] 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! […]

  • yakuter » Wordpress İçin Ajax Uygulamaları December 9th, 2007 @ 10:40 am (#)

    […] Better-Than-Live AJAX WordPress Search v2: Günlüğünüzde AJAX ile hızlı aramalar yapmanızı sağlayan bir eklenti. […]

  • Matheus Siqueira December 13th, 2007 @ 7:46 am (#)

    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. […]

  • Laurent LaSalle December 15th, 2007 @ 7:46 am (#)

    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. […]

  • Andy December 19th, 2007 @ 12:33 pm (#)

    Oh, and did not know about it. Thanks for the information …

  • Laurent LaSalle December 19th, 2007 @ 12:41 pm (#)

    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…

  • WebHelperMagazine.com » Blog Archive » WordPress December 30th, 2007 @ 9:11 am (#)

    […] 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.” […]

  • gerben January 11th, 2008 @ 1:01 pm (#)

    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?

  • Elliot Swan January 11th, 2008 @ 1:20 pm (#)

    @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.

  • gerben January 11th, 2008 @ 1:22 pm (#)

    okay thanks for the quick response :)

    were trying to get this to work with code igniter but it wont work..

    any experience on this?

  • Elliot Swan January 11th, 2008 @ 1:26 pm (#)

    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.

  • gerben January 11th, 2008 @ 1:34 pm (#)

    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

  • gerben January 11th, 2008 @ 1:36 pm (#)

    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

  • gerben January 11th, 2008 @ 1:38 pm (#)

    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.” […]

  • adriankoooo January 19th, 2008 @ 7:02 pm (#)

    I removed the include(”yourpath/wp-blog-header.php”); line, because I wanted to show results on the sidebar.

  • adriankoooo January 20th, 2008 @ 4:54 am (#)

    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. […]

  • Me March 8th, 2008 @ 4:15 pm (#)

    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.

  • Laurent LaSalle March 8th, 2008 @ 4:28 pm (#)

    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…

  • Me March 8th, 2008 @ 7:59 pm (#)

    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.

  • Laurent LaSalle March 8th, 2008 @ 8:07 pm (#)

    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?

  • Me March 8th, 2008 @ 9:40 pm (#)

    Thank you.

    I can get it to preform a search but it sends me to a new page to view the results.

  • Elliot Swan March 8th, 2008 @ 11:49 pm (#)

    @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!

  • Me March 9th, 2008 @ 7:55 pm (#)

    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.

  • Me March 9th, 2008 @ 8:24 pm (#)

    I forgot to say that I don’t expect free help here, I don’t mind paying for your help.

  • Elliot Swan March 9th, 2008 @ 8:32 pm (#)

    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. ;)

  • hell-world March 15th, 2008 @ 11:11 am (#)

    Ty…….

  • joscha April 6th, 2008 @ 11:53 am (#)

    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!

  • joscha April 6th, 2008 @ 11:57 am (#)

    just subscribing to follow up posts here…

  • joscha April 6th, 2008 @ 12:13 pm (#)

    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!

  • jamalak April 8th, 2008 @ 2:06 am (#)

    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 ?

  • Free Wordpress Theme April 15th, 2008 @ 6:21 am (#)

    brilliant code, thanks for sharing, i love them!

  • toasterpop April 26th, 2008 @ 10:28 am (#)

    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.

  • Elias Lange April 28th, 2008 @ 12:47 am (#)

    awesome…

Say Something.





I'm a nice guy, so I'll let you use basic XHTML such as <a>, <strong>, <em>, <blockquote>, and <code>. If you're trying to share some code with us, just make sure to run it through Postable first.

Write your comment