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

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