Howto Build Server Side AJAX Suggestions with script.aculo.us

web

I'm a big fan of the script.aculo.us javascript library. I have been using some of the effects on a dashboard console for one of my clients, it has been quite nice to work with, and has really helped improve the user experience.

I also used script.aculo.us on cssdocs.org for the dynamic css property suggestions (script.aculo.us calls this autocomplete).

So let's get started

Step 1: Include javascript libraries

First you need to include prototype.js (which you can find in the lib folder of your scriptaculous download. I recommend creating a folder for your javascript files called js. Next you need to include scriptaculous.js - this file will include some of the other scripts included such as controls.js

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>

Step 2: Create Your Form

Next we need to create a form, we are also going to add a div after our text box this is where the suggestions will show up.

<form action="search.cfm">
  <input type="text" name="email" id="email" />
  <div id="suggestionBox"></div>
</form>

Step 3: Call Ajax.Autocompleter

Now we need to use the Ajax.Autocompleter javascript class in script.aculo.us

<script type="text/javascript" language="javascript">
  var myAutoCompleter = new Ajax.Autocompleter('email', 'suggestionBox', 'suggest.cfm', {});
</script>

Step 4: Create Server Side Element: suggest.cfm

In this example I'm using ColdFusion (CFML), but you could just as easily replace this part with suggest.php, suggest.jsp, or whatever.

<cfparam name="form.email" default="" type="string">
<cfquery datasource="dsn" name="suggestions">
  SELECT email
  FROM contacts
  WHERE email LIKE 
</cfquery>
<ol>
<cfoutput query="suggestions">
  <li>#suggestions.email#</li>
</cfoutput>
</ol>

The Ajax.Autocompleter will by default pass what the user is typing in as POST form variable with the same name as the input element. We can then use a LIKE command in SQL to find matches, which should be outputted as a UL list.

Step 5: Add some CSS

Finally you need to add some CSS to make things look nice. The selected suggestion will have the CSS class selected so we will want to set a background-color on that.

.selected { background-color: #f1f1f1; }
#suggestionBox { display:none; border: 1px solid silver; }

And that's it, you can check out a live example at: cssdocs.org



Related Entries

8 people found this page useful, what do you think?

Trackbacks

Trackback Address: 605/6161A1EC7F6C322919617379DD6DB8DE

Comments

On 12/06/2006 at 9:57:40 PM EST Rey Bango wrote:
1
Pete, if you like scriptaculous, you're gonna love jQuery (jquery.com). You need to check it out. I just got Joe Danziger to check it out and look what he wrote:

http://www.ajaxcf.com/blog/index.cfm/2006/12/6/Why-jQuery-Rocks

Rob Gonda is another one of my converts. Once you use it, you'll be hooked. :o)

Rey...

On 12/07/2006 at 8:10:26 AM EST Kris Brixon wrote:
2
Here is another tutorial on the same subject, I wrote a few months ago.

http://tutorial473.easycfm.com/

One tip, make sure the query has a limit. Too many results will cause JS to crawl.

On 09/28/2007 at 10:21:49 PM EDT susan buck wrote:
3
One problem i had with this autocomplete was that it wasn't smart enough... ie... if my search term was missing a word, it couldn't find what i was looking for.

For example, in a db of cameras if I was looking for a "Camera PowerShot sd800 Digital Elph" but only remember the model number, not the full name ...so i'd type in "Canon SD800"...and itd give me nothing It wasn't until i typed in "Canon PowerShot SD..." that it found something. I needed it to ignore that I had forgotten PowerShot

I found a real simple solution - which I describe in detail here - http://www.susanbuck.net/sb/words/index.asp?permanent=yes&permKey=163

On 01/20/2008 at 9:42:45 PM EST John wrote:
4
How do I use this for my search form on my main page? Do I need anything special installed on the server? http://www.plentyoftorrents.com

On 04/08/2008 at 12:00:35 AM EDT Anonymous wrote:
5
* ColdFusion 8 Update 1 Fixes some Image Processing Quirks * 10 Most Used Image Functions in ColdFusion 8 * Speaking at NYC Cu This Week * Adobe AIR Tutorial for HTML / Java Developers * INFORMATION_SCHEMA Support in Mays, Post * Moving a Subversion Repository to Another Server * Founded's 2007 End of the Year Sale * A Project Management Tip for Fridays

On 05/27/2008 at 10:20:03 AM EDT lhuv wrote:
6
Are you a big fan of movies and all the new releases on the big screen? Do you like to watch all the latest movies as soon as they are released? If the answer is yes, and you not only love to watch movies but you also like to get loads of other movie related products as well then there is a web site that is perfectly suited to you. The web site that you should consider taking a look at is called. The Films gives its visitors the chance to down load many of the latest movie releases as well as offering loads of news about all that is going on with in the movie industry and the actors in and around Hollywood. From this web sites well designed menu system you can also access movie sound tracks, and down load wall papers of you favorite movies and movie stars.

On 10/17/2008 at 10:52:12 AM EDT JW! wrote:
7
Hi,

I've got this almost working. The only snag is that ColdFusion is not recognizing the search variable sent from the scriptaculous script. I'm checking to see if it's defined, and it isn't. What do I do? I'm at a loss here. Anyone's help would be greatly appreciated.

Thanks much, JW!

On 10/29/2008 at 2:16:52 AM EDT bnm8 wrote:
8
My name Gim and i can sell you best 2006 health - see it,

On 11/03/2010 at 4:33:20 AM EDT comparatif assurance auto wrote:
9
I’ve been visiting your blog for a while now and I always find a gem in your new posts. Thanks for sharing.

On 12/13/2010 at 1:27:46 AM EST Mike wrote:
10
Does anyone have a php query solution . I put one together that creates an unordered list as suggested. I am not a javascript coder but for me it seems like the small bit of javascript is not passing anything to or calling the file ..not running the query ? Any thoughts anyone ..Pete?

On 03/08/2011 at 1:20:33 AM EST Rogedyexext wrote:
11
Great Blog. I add this Blog to my bookmarks.

On 05/10/2011 at 1:12:06 PM EDT TLSubmit wrote:
12
Hey im new here. Im sam, how is everyone? I look forwards to being a active memeber

On 06/17/2011 at 11:55:51 AM EDT engendJoymn wrote:
13
ipage web hosting information

On 07/15/2011 at 12:29:25 PM EDT justhosthosting wrote:
14
justhost hosting top cpanel hosting http://technologycanada.com/justhost-hosting/

Post a Comment




  



Spell Checker by Foundeo

Recent Entries



foundeo


did you hack my cf?