Quantcast

Building Server Side AJAX Suggestions with script.aculo.us

Get the WebProNews Newsletter:


[ Business]

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

AJAX Tutorial with Prototype – December 13, 2005
GoogleBot Runs AJAX? – December 6, 2006
Tracking JavaScript Events with Google Analytics – September 28, 2006
AJAX Presentation Outline – December 13, 2005
AJAX on IE – back to the IFRAME – August 17, 2005

Comments

*Originally published at Pete Freitag’s Homepage

Tag:

Add to Del.icio.us | Digg | Reddit | Furl

Bookmark WebProNews:

Pete Freitag (http://www.petefreitag.com/) is a software engineer, and
web developer located in central new york. Pete specializes in the
HTTP protocol, web services, xml, java, and coldfusion. In 2003 Pete
published the ColdFusion MX Developers Cookbook with SAMs Publishing.

Pete owns a Firm called Foundeo (http://foundeo.com/) that specializes
in Web Consulting, and Products for Web Developers.

Building Server Side AJAX Suggestions with script.aculo.us
Top Rated White Papers and Resources
  • Miguel Guerrero

    This fucking post is in all sites, don’t fuck me!!!

    Best regards

  • Join for Access to Our Exclusive Web Tools
  • Sidebar Top
  • Sidebar Middle
  • Sign Up For The Free Newsletter
  • Sidebar Bottom