Building a Local Auto-Completer

Posted At : February 28, 2006 1:30 PM | Posted By : Joe Danziger
Related Categories: Scriptaculous | 5014 Views

It's been a while since the last posting so I wanted to get some more tips up here.  Just been real busy lately getting ready for the Winter Music Conference next month, but lots more coming soon!

Today's code is pretty straight forward.  It doesn't really use any AJAX, just takes advantage of the Auto-Completer class of Scriptaculous to create customized drop downs that filter themselves as you type.  This is called a local auto-completer since all of the data needed to create it is available when the page is called - there is no remote data coming in via AJAX.  For this example, we'll use the a list of ColdFusion functions.



As usual, you need to include references to our libraries in the <head> section of your page:

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

Next, we'll add an input box and a div which will hold the results:

<label for="input_string">CF Tags:</label>
<input id="input_string" autocomplete="off" type="text" />
<div id="autocomplete_choices" style="display:none"></div>

Notice the autocomplete="off" - we add that to turn off the browser's built-in auto-completing capabilities. Also, the div holding the results has its display style set to none so it won't be visible.

Finally, we add the code to create the Auto-Completer:

<script type="text/javascript">
new Autocompleter.Local('input_string', 'autocomplete_choices', ['cfabort', 'cfapplet', 'cfapplication', 'cfargument', 'cfassociate', 'cfbreak', 'cfcache', 'cfcalendar', 'cfcase', 'cfcatch', 'cfchart', 'cfchartdata', 'cfchartseries', 'cfcol', 'cfcollection', 'cfcomponent', 'cfcontent', 'cfcookie', 'cfdefaultcase', 'cfdirectory', 'cfdocument', 'cfdocumentitem', 'cfdocumentsection', 'cfdump', 'cfelse', 'cfelseif', 'cferror', 'cfexecute', 'cfexit', 'cffile', 'cfflush', 'cfform', 'cfformgroup', 'cfformitem', 'cfftp', 'cffunction', 'cfgrid', 'cfgridcolumn', 'cfgridrow', 'cfgridupdate', 'cfheader', 'cfhtmlhead', 'cfhttp', 'cfhttpparam', 'cfif', 'cfimport', 'cfinclude', 'cfindex', 'cfinput', 'cfinsert', 'cfinvoke', 'cfinvokeargument', 'cfldap', 'cflocation', 'cflock', 'cflog', 'cflogin', 'cfloginuser', 'cflogout', 'cfloop', 'cfmail', 'cfmailparam', 'cfmailpart', 'cfmodule', 'cfNTauthenticate', 'cfobject', 'cfobjectcache', 'cfoutput', 'cfparam', 'cfpop', 'cfprocessingdirective', 'cfprocparam', 'cfprocresult', 'cfproperty', 'cfquery', 'cfqueryparam', 'cfregistry', 'cfreport', 'cfreportparam', 'cfrethrow', 'cfreturn', 'cfsavecontent', 'cfschedule', 'cfscript', 'cfsearch', 'cfselect', 'cfset', 'cfsetting', 'cfsilent', 'cfslider', 'cfstoredproc', 'cfswitch', 'cftable', 'cftextarea', 'cfthrow', 'cftimer', 'cftrace', 'cftransaction', 'cftree', 'cftreeitem', 'cftry', 'cfupdate', 'cfwddx', 'cfxml'], { minChars:2, partialSearch:true });
</script>

The last parameter in brackets is a list of options to feed into the Auto-Completer. We set minChars to 2 to hold back the search until 2 characters are typed in, and also fullSearch to true to match patterns anywhere within the tag name.

Lastly, we add some CSS to style the dropdown:

<style type="text/css">
#autocomplete_choices {
     position:absolute;
     background-color:#fff;
     border:1px solid #888;
}
.selected {
     background-color:#ffc;
}
</style>

And what do we end up with?

Comments (0) | Print | Send | del.icio.us | Digg It! | Linking Blogs
Comments (Comment Moderation is enabled. Your comment will not appear until approved.)

There are no comments for this entry.

[Add Comment]

Archives By Subject

RSS Accessibility (1)
RSS AJAX (12)
RSS BlogCFC (1)
RSS CFEclipse (2)
RSS CFUNITED (3)
RSS Code (2)
RSS ColdFusion (11)
RSS iFrames (1)
RSS Javascript (1)
RSS jQuery (1)
RSS Libraries (1)
RSS Mashups (1)
RSS OpenDocument (1)
RSS Project Tracker (2)
RSS Projects (1)
RSS Prototype (2)
RSS Scriptaculous (1)
RSS Subversion (2)
RSS Technology (1)
RSS Tools (2)
RSS Usability (2)
RSS XmlHttpRequest (1)

Calendar

<< July 2009 >>
Sun Mon Tue Wed Thu Fri Sat
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  

Latest from MXNA

BulletTop 7 Adobe AIR Apps for Videos you should know
BulletStreaming Video Between QuickTime Broadcaster and VLC
BulletPresenting Flex 4 Component Lifecycle at FlexMania
BulletBounce Effect
BulletReusing properties in database.yml

Recent Entries

No recent entries.

Recent Comments

BulletProject Tracker v2.0 Released
Scott said: Joe- Great app - I use it at work. I do have a question, though. I wanted to install this on my host... [More]

BulletThe Importance of HTMLEditFormat()
Andrew said: Just do it when outputting to the screen, not when inserting/updating data in the database otherwis... [More]

BulletProject Tracker v2.0 Released
Aaron Bodell said: I came across this app while searching the RIAForge for project trackers. I'm really impressed with ... [More]

BulletProject Tracker v2.0 Released
Richard said: Thanks Joe - Looking forward to testing the new version! Is there somewhere we can make suggestions... [More]

BulletAmazon S3 REST Wrapper
Zac Spitzer said: I've been hacking away on the CFC and I have fixed numerous bugs and added support for compression, ... [More]

RSS


Search

Sponsored Links

Wimpy MP3 Player
Wimpy MP3 Player
easy streaming media
for your coldfusion site


Subscribe

Enter your email address to subscribe to this blog.

Tags

ajax coldfusion