Building a Local Auto-Completer
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>
<label for="input_string">CF Tags:</label>
<input id="input_string" autocomplete="off" type="text" />
<div id="autocomplete_choices" style="display:none"></div>
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>
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>
show
There is an example built right into the page above. Try entering "cf" into the input field.
