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

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
2 people found this page useful, what do you think?

Trackback Address: 605/6161A1EC7F6C322919617379DD6DB8DE
On 12/06/2006 at 7:57:40 PM MST 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 6:10:26 AM MST 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 8:21:49 PM MDT 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 7:42:45 PM MST 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/07/2008 at 10:00:35 PM MDT 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




  



Spell Checker by Foundeo





Subscribe to my RSS Feed: solosub RSS
Tags