diTii.com Digital News Hub

Sign up with your email address to be the first to know about latest news and more.

I agree to have my personal information transfered to MailChimp (more information)

Dec062006

How To: Build Server Side AJAX Suggestions with script.aculo.us

Pete Freitag show us how to build Server Side AJAX suggestion using script.aculo.us javascript library. He has used script.aculo.us on cssdocs.org for the dynamic css property suggestions (script.aculo.us calls this autocomplete).

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




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.


Step 3: Call Ajax.Autocompleter

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


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.




  SELECT email
  FROM contacts
  WHERE email LIKE 

  1. #suggestions.email#

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; }

Pete

How To, Build Server Side AJAX Suggestions, script.aculo.us, Ajax.Autocompleter

Share This Story, Choose Your Platform!