[Snippet] AjaxSearch

[Guest]

Welcome, Guest. Please login or register.
Did you miss your activation email?

1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[kylej]

With all of the AJAX talk going around I thought it was time to add some to my site. This snippet turns the FlexSearchForm snippet into an AJAX site search. The results from the search are loaded right in the page for the user. If the user does not have javascript enabled, the snippet will use the default searching of the FlexSearchForm snippet.

The javascript code is based off of the example by Steve Smith of orderedlist.com.

If you would like to see this in action you can go to my site here:

http://www.muddydogpaws.com/notebook/ajax-search-snippet.html

The instructions for installing and setting up this snippet are in the FSFAjax_readme.txt file in the zip.

Enjoy,
 
Kyle

Updated: 05/18/2006 - I have added the code from Thomas (Shadock) to the main snippet to allow for live searching (i.e. results as you type).  There is a new parameter that goes along with this.  If you add the parameter &ajaxSearchType=`1` you will turn on the live search.  I have also updated the scriptaculous effects to run in succession so the effects look better.

Updated: 04/03/2006 - To make the search even better, I have added the search highlighting code from Marc (MadeMyDay). The updated code can be found in the download. You need to update all of the files excluding the images for this to work correctly.

Updated: 03/20/2006 - After receiving some feedback I have modified the snippet a little. There is now a button that appears to close the search box after a search. Also I have made the snippet output the parameters set in the snippet to a bit of javascript so that I can use them in the ajax call. So you do not have to update the file ajaxSearch.php for your search settings. A thank you goes out to sottwell for these great ideas.

*******Update: 03/19/06***********
I added a button to close the seach box after you run the search.  Great idea Susan.  I have updated the zip here and on my site.  The only file I had to change was the javascript file, so that is the only one you need to update.


Mod note: File removed: ajaxSearch.zip (19.93 KB - downloaded 76 times.)
Please visit the AjaxSearch Repository entry for downloads.

[davidm]

I just love the livesearch, very nice one !

Just a problem : the archive above is corrupt can't download it... Got it from your website though, and will try it tomorrow...

Thanks a lot for this one

[doze]

Yes, great work again Kyle! I like it alot, and will definitely use. Thanks!

[kylej]

I have updated the file for download above.

[garryn]

Cool snippet!   I will definitely give this one a try.

[Mark]

That is waaaaaaaaay cooler than the Etomite one I ported a while back... (never released due to various issues)

[Dr. Scotty Delicious]

I love it.  Thanks for sharing this man.  It is in use at my site now (see the sig).  Very clever piece of scripting.

-sD-
scotty Delicious

[sottwell]

Excellent! The only 'quibble' I could have is that it would be nice to be able to close the boxes. Maybe a button with something like this:

Code:

onclick="Effect.Fade(this)"

[kylej]

Excellent! The only 'quibble' I could have is that it would be nice to be able to close the boxes. Maybe a button with something like this:

Code:

onclick="Effect.Fade(this)"

I have posted an updated version with this functionality included, great idea.

[sottwell]

# Open ajaxSearch.php and set the options for your search.*

Hmm...is there perhaps some way the snippet could generate a bit of javascript that loads an array of these values into the javascript scope, then they could be passed via the AJAX call as params?

[kylej]

That sounds like it could be possible, Ihadn't thought of doing it that way.  Has anyone used a snippet to do this before?  If not I will have to look into doing it.  I think it sounds like a good idea.

[rthrash]

Out of curiosity, what happens if someone happens to have JS turned off with this... does it degrade and work like a regular old search form?

[doze]

If the user does not have javascript enabled, the snippet will use the default searching of the FlexSearchForm snippet.

Looking at this quote from the first post, I would guess "yes".. 

[kylej]

Yep, it works just like the old search form.  I use javascript to change the functionality of the form, so if there is no javascript, it does the original form action.

[rthrash]

And then some days, you just don't read...