Thanks Carl!
Mark A. Kruger, CFG, MCSE (402) 408-3733 ext 105 www.cfwebtools.com www.coldfusionmuse.com www.necfug.com -----Original Message----- From: Carl Von Stetten [mailto:[EMAIL PROTECTED] Sent: Thursday, June 19, 2008 10:59 AM To: CF-Talk Subject: Re: ComboBox? Mark, Here is some sample code from my intranet site. First, in the <head> tag of the page, I have this: 1. <link rel="stylesheet" type="text/css" href="css/jQuery/ui.datepicker.css" /> 2. <link rel="stylesheet" type="text/css" href="css/jQuery/jquery.autocomplete.css" /> 3. 4. <script type="text/javascript" src="scripts/jQuery/jquery-1.2.6.min.js"></script> 5. <script type="text/javascript" src="scripts/jQuery/jquery.bgiframe.min.js"></script> 6. <script type="text/javascript" src="scripts/jQuery/jquery.autocomplete.min.js"></script> 7. 8. <script type="text/javascript"> 9. //jQuery will execute the function when the DOM has been fully loaded (ready) 10. //as this is more reliable than using the Body onLoad attribute. 11. $(document).ready(function(){ 12. //Attach the autocompleter to input controls with class "acbox". Had to use 13. //jQuery.each to iterate through the collection of controls because otherwise 14. //jQuery attaches the same instance of autocomplete to each of the controls, 15. //negating the setting of the extraParams to the unique id of each control. 16. jQuery.each($(".acbox"), function() { 17. $(this).autocomplete("autocomplete_queries.cfm", 18. { max:10, 19. scroll:true, 20. scrollheight:150, 21. selectFirst:false, 22. extraParams:{type:this.id} } 23. ); 24. }); 25. }); 26. </script> What the script does is attach the jQuery autocomplete AJAX function to each input control with the css class ".acbox". I have one CF template that performs all of my autocomplete queries (autocomplete_queries.cfm); I have a snippet from that shown below. The key to making it work is to setting a unique "id" attribute to each input. This id is then passed as a parameter to the autocomplete_queries.cfm file in line 22 using the extraParams option (I pass the id in the AJAX request as the "type" parameter). "this.id" passes the id attribute of the current input control. See http://docs.jquery.com/Plugins/Autocomplete for more information. Here is a sample snippet from my autocomplete_queries.cfm: 1. <cfsetting enablecfoutputonly="yes" showdebugoutput="no"> 2. <cfif StructKeyExists(url, "type") and StructKeyExists(url, "q")> 3. <!--- Customers ---> 4. <cfif url.type eq "f_sht_cont"> 5. <cfquery datasource="#myDataSource#" name="getShtContent"> 6. select distinct Sht_Cont 7. from tblAs_Builts 8. where Sht_Cont like '%#url.q#%' 9. order by Sht_Cont 10. </cfquery> 11. <cfoutput query="getShtContent">#Sht_Cont# 12. </cfoutput> 13. </cfif> 14. </cfif> The autocomplete plugin automatically passes what has been typed into the input control as a parameter named "q". In addition, I'm passing the input control's id attribute as the "type" parameter (in this case, the id of my input control was "f_sht_cont". Two things are important to keep in mind with the template used to perform the autocomplete lookups: it must only output the query results (no extra whitespace, no debug output), and each result must be on a separate line (which is why the </cfoutput> closing tag is not on the same line as the rest of the <cfoutput> tag. Hopefully this is enough to get started. You can get a lot of help on the jQuery Google Groups (http://groups.google.com/group/jquery-en). Carl Mark Kruger wrote: > Anyone know of an example? That would be interesting to me as well. > > -mk > > -----Original Message----- > From: Carl Von Stetten [mailto:[EMAIL PROTECTED] > Sent: Thursday, June 19, 2008 10:20 AM > To: CF-Talk > Subject: Re: ComboBox? > > jQuery Autocomplete? > > Carl > > Les Mizzell wrote: > >> I've been searching, but so far, not found anything that I can get to >> work or does what I need... >> >> All I need is a dropdown list that I can type a new value into if >> what I want (coming from a database) isn't already there. >> >> I've seen a few CSS "tricks" where you stack a normal text input on >> top of a dropdown, but that's not the answer. >> >> Haven't found anything using SPRY yet. >> >> Ajax? I've been looking, but haven't found anything that I've been >> able to get to work and I've not really used AJAX to any degree yet. >> >> Pointers? >> >> >> > > > > ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~| Adobe® ColdFusion® 8 software 8 is the most important and dramatic release to date Get the Free Trial http://ad.doubleclick.net/clk;203748912;27390454;j Archive: http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:307729 Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
