Building a Local Auto-Completer

Posted At : February 28, 2006 1:30 PM | Posted By : Joe Danziger
Related Categories: Scriptaculous | 3807 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

<< December 2008 >>
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

BulletYet Another 'Passed By Reference' Analogy
BulletCyber Monday: Turns out it isn’t a myth after all
BulletYou will use cfqueryparam... or else!
BulletFlex AS3 Metadata tags
BulletSimon Bisson On The Future Of ColdFusion

Recent Entries

No recent entries.

Recent Comments

BulletProject Tracker v2.0 Released
Joe Danziger said: @Doug - thanks, glad you like the app! You can add the following to the <cfapplication> call ... [More]

BulletProject Tracker v2.0 Released
Doug said: Great App! How can I increase the time before the session times out? thanks! [More]

BulletProject Tracker v2.0 Released
Joe Danziger said: @Ron - You can access the demo with username admin and password admin. [More]

BulletProject Tracker v2.0 Released
Ron Stewart said: Joe: from the screenshots and the blog entries, this looks pretty cool. I'd like to play in the demo... [More]

BulletProject Tracker v2.0 Released
Mike G said: very very very nice work Dan, nearly blew my load when I saw you even included an API to access ever... [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