autosuggest

I have a form field that autosuggests an email address, however it only works with one email address at a time.  How would I go about setting it up so that when a user starts typing the autosuggest will append the email address with a semicolon and then allow the user to search for another address in the same field?  This is my first time really working with autosuggest and the examples in the CFWACK don't cover what I want to do. Thanks! ~Steve

Appending the semicolon was easy enough, I was trying to make it more complicated than it was for some reason.  Never dawned on me to try <cfset data = data.email & "; "> Still looking for a way to keep autosuggesting emails once the first has been selected though. ~Steve http://goodcf.instantspot.com/ Sent: Wednesday, April 02, 2008 12:58 PM To: CF-Talk Subject: autosuggest I have a form field that autosuggests an email address, however it only works with one email address at a time.  How would I go about setting it up so that when a user starts typing the autosuggest will append the email address with a semicolon and then allow the user to search for another address in the same field?  This is my first time really working with autosuggest and the examples in the CFWACK don't cover what I want to do. Thanks! ~Steve

You can get the autosuggest to give you a list of emails based on the last entered text in a list by binding the autosuggest to a cfc or url. See the 'Using autosuggest text input fields' near the bottom of this page: http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=ajaxui_7.html However, I think the CF implementation of the autosuggest will force that a single email picked from the autosuggest list will overwrite whatever is in the text box. I think you would need to write some custom javascript to get it to overwrite only the last item in a list but someone should be able to help you with that if its the case (I'd be interested to see it!) HTH Dominic -- Blog it up: http://fusion.dominicwatson.co.uk

Thanks Dom, I'm binding to a cfc already, that isn't a problem.  What I'm hoping to do is the same thing google does with gmail.  You start typing an address and the autosuggest drops down addresses from your address book, you select one, then start typing to find another one and the autosuggest starts returning addresses based on what you started typing after the last address was selected.  This is all done in a single input field.  I'm hoping that I can avoid needing to write out a custom AJAX function to accomplish this since it is being added onto a seldom used tool that we aren't really wanting to spend a whole lot of time on. Thanks! ~Steve http://goodcf.instantspot.com/ You can get the autosuggest to give you a list of emails based on the last entered text in a list by binding the autosuggest to a cfc or url. See the 'Using autosuggest text input fields' near the bottom of this page: http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=ajaxui_7.h tml However, I think the CF implementation of the autosuggest will force that a single email picked from the autosuggest list will overwrite whatever is in the text box. I think you would need to write some custom javascript to get it to overwrite only the last item in a list but someone should be able to help you with that if its the case (I'd be interested to see it!) HTH Dominic -- Blog it up: http://fusion.dominicwatson.co.uk

I just tried doing the first part (getting an autosuggest list based on the last item in a list) and it seems even that is not possible. ColdFusion doesn't trust that the array you return contains matches according to its simple search rule (beginning of the string = beginning of the match) and removes items from the autosuggest array that don't match the rule! Dominic ----- Excess quoted text cut - see Original Post for more -----

Good news :) I just had a fiddle and its so easy you wouldn't believe (absolutely should be a feature request!). The YAHOO.widget.AutoComplete object, on which the cfautocomplete is based on, has a 'delimChar' property which you can set much in the same way as you would the delimeters of a list loop, etc. Doing so makes it work exactly as you want! I'm not sure of the best way to go about making use of this but I got a quick example going by copying the HTML output of a simple cfform with an autocomplete and modifying the javascript to do with the autocomplete. Then I just ran that flat HTML. Here's the bit I modified: var _cf_autosuggest_init_1207175284282=function() { var _cf_autosuggestarray=[]; var _cf_autosuggestdatasource= new YAHOO.widget.DS_JSArray( _cf_autosuggestarray); var _cf_autosuggest= new YAHOO.widget.AutoComplete( 'foo','foocontainer' ,_cf_autosuggestdatasource); _cf_autosuggest.onbinderror=null; _cf_autosuggest.prehighlightClassName = "yui-ac-prehighlight"; _cf_autosuggest.typeAhead = false; _cf_autosuggest.maxResultsDisplayed = 10; _cf_autosuggest.useShadow = true; _cf_autosuggest.showloadingicon = true; _cf_autosuggest.containerCollapseEvent.subscribe(ColdFusion.Autosuggest. triggerOnChange); _cf_autosuggest.id='foo'; _cf_autosuggest.valuePresent=false; _cf_autosuggest.doBeforeExpandContainer=_cf_resetLoadingIcon_1207175284283; <!--- HERE IT IS: ---> _cf_autosuggest.delimChar=';'; ... I'll carry on working on something that is more reusable, etc. but maybe you can figure something with that. Dominic -- Blog it up: http://fusion.dominicwatson.co.uk

Right, I finally worked out a concise solution :) I blogged about it here: http://fusion.dominicwatson.co.uk/2008/04/tidy-autosuggesting-solution.html Dominic -- Blog it up: http://fusion.dominicwatson.co.uk

Wow Dom!  Thanks for spending so much time on this!  You came up with a much better, and easier solution than I had come up with.  My way involved adding some jquery to create a list of emails one at a time, appending the that list to a <span> and the value attribute of a hidden input tag, then clearing the autosuggest field each time an address was found, chosen, and the user clicked an "Add" button.  I'll give your method a try since that was what I had been looking to do in the first place. Rock on! ~Steve http://goodcf.instantspot.com Right, I finally worked out a concise solution :) I blogged about it here: http://fusion.dominicwatson.co.uk/2008/04/tidy-autosuggesting-solution.html Dominic -- Blog it up: http://fusion.dominicwatson.co.uk

:) no worries, figured it would be globally useful and is an area I'd like to learn about. I've just thought too that my solution is too narrow and am just completing a custom tag that will allow you to set all those different autosuggest properties. You would use it in place of the cfinput tag. Will post when ready. Dominic ----- Excess quoted text cut - see Original Post for more -----

There is now a custom tag for an auto-suggesting cfinput with more than just enabling listed auto-suggests :) http://betterautosuggest.riaforge.org/ Dominic -- Blog it up: http://fusion.dominicwatson.co.uk

Dominic, You Rule! G On Thu, Apr 3, 2008 at 11:02 AM, Dominic Watson < watson.dominic@googlemail.com> wrote: ----- Excess quoted text cut - see Original Post for more -----

Got a demo of this, Dominic? Rick ----- Excess quoted text cut - see Original Post for more -----

Here's the example.cfm that comes in the riaforge download: http://dev.dominicwatson.co.uk/autosuggest/example.cfm The first box has the following settings: <custom:betterautosuggest name="fruit" autosuggest="apple,banana,lemon,lime,mango,orange,peach,pear" autosuggestbinddelay="1" autosuggestminlength="1" delimchar=";" animhoriz="true" animvert="false" animSpeed="0.1"/> And the second: <custom:betterautosuggest name="vegetables" autosuggest="bean,brocolli,carrot,colliflower,leak,parsnip,potato,turnip" forceselection="true" typeahead="true" useShadow="false"/> Dominic ----- Excess quoted text cut - see Original Post for more -----

Looks really good, Dominic. I really like the way a matching choice is focused for selection by hitting the enter key. It's always been frustrating to me to have autosuggests that require me to use the down arrow to select a suggestion. I'm sure this is going to come in very handy! Thanks for the great work! Rick ----- Excess quoted text cut - see Original Post for more -----

+1 for Dominic On Thu, Apr 3, 2008 at 12:00 PM, Dominic Watson < watson.dominic@googlemail.com> wrote: ----- Excess quoted text cut - see Original Post for more -----

Fyi, your example for veggies is not including the delimiter when selecting the item.  But I like that I can specify my own delimiter in there.  And the typahead is way cool.  Can this connect to a CFC in the same way as the regular autosuggest attrib?  i.e. autosuggest="cfc:mycfc.myfunction({cfautosuggestvalue})" ~Steve http://goodcf.instantspot.com/ Here's the example.cfm that comes in the riaforge download: http://dev.dominicwatson.co.uk/autosuggest/example.cfm The first box has the following settings: <custom:betterautosuggest name="fruit" autosuggest="apple,banana,lemon,lime,mango,orange,peach,pear" autosuggestbinddelay="1" autosuggestminlength="1" delimchar=";" animhoriz="true" animvert="false" animSpeed="0.1"/> And the second: <custom:betterautosuggest name="vegetables" autosuggest="bean,brocolli,carrot,colliflower,leak,parsnip,potato,turnip" forceselection="true" typeahead="true" useShadow="false"/> Dominic ----- Excess quoted text cut - see Original Post for more -----

> Fyi, your example for veggies is not including the delimiter when > selecting > the item. Yeh, it's not supposed to. The two boxes are demonstrating different things. The first is sideways animation and delimited list. The second is no drop shadow, enforced selection and typeahead. Of course, all the smart ppl behind the YAHOO ui are really to thank ;) Dominic -- Blog it up: http://fusion.dominicwatson.co.uk

Ahh cool, I get it. I'll definitely be using this where I can. ~Steve http://goodcf.instantspot.com/ > Fyi, your example for veggies is not including the delimiter when > selecting > the item. Yeh, it's not supposed to. The two boxes are demonstrating different things. The first is sideways animation and delimited list. The second is no drop shadow, enforced selection and typeahead. Of course, all the smart ppl behind the YAHOO ui are really to thank ;) Dominic -- Blog it up: http://fusion.dominicwatson.co.uk

Just posted my solution to the autosuggest "challenge" I was having yesterday.  It's not nearly as nice as the solution that Dom presented, but I think as a quick solution it's not half bad. http://goodcf.instantspot.com/blog/2008/04/03/Creating-and-Appending-a-List- Using-AutoSuggest-and-JQuery ~Steve http://goodcf.instantspot.com/

Sorry to beat a dying horse here, but I'm having issues getting a second value to return using the custom tag.  It works fine if I use a list, but if I bind it to my cfc that runs a query it returns the first value but stops after that.  I can see it's talking to my CFC if I keep typing, but it never returns anything. Here's the CFC I'm using, I'm sure the problem is in here someplace.  Other than the Application.cfc I'm relatively new to CFCs and they way they work. So I'm sure I missed something here. <cfcomponent displayname="emailAutoSuggest" hint="Auto Suggests Email Addresses" output="true">   <cffunction name="lookupEmail" displayname="lookupEmail" hint="Queries for an email address based on string in form" access="remote" output="false" returntype="String">     <cfargument name="search" displayName="search" type="Any" hint="passes the form string to the query" required="false" />       <!--- define vars --->       <cfset var data = "">       <!--- do the searching --->       <cfquery datasource="#application.ds#" name="data">       SELECT leemail       FROM emailview       WHERE  ({ fn UCASE(leemail) } LIKE { fn UCASE('#ARGUMENTS.search#%') })       AND (frn_leuserid = #session.callmeasurement_uid#)       ORDER BY leemail       </cfquery>     <cfreturn data.leemail />   </cffunction> </cfcomponent> Thanks again for the help :) ~Steve http://goodcf.instantspot.com/

Hi Steve, I got it to work with a cfc by doing something like this: <cffunction name="lookupEmail"> <cfargument name="search" /> <cfset var emailSearch = ListLast(arguments.search, ';')> <cfquery datasource="#application.ds#" name="data"> *SELECT* leemail *FROM* emailview *WHERE* ({ fn *UCASE*(leemail) } *LIKE* { fn*UCASE*('#emailSearch #%') }) *AND* (frn_leuserid = #*session*.callmeasurement_uid#) *ORDER* *BY* leemail </cfquery> </cffunction> HTH Dominic ----- Excess quoted text cut - see Original Post for more -----

Sweet Dom, thanks again.  I used your example, but that didn't want to work either.  I noticed that ListLast(arguments.search, ';') did not have a space after the semi-colon like the list of email addresses does after the autosuggest fills it in.  After I added the space in there it works like a champ!  Also needed to set the function to remote, but I guess I have to do SOME of the work lol! Thanks! ~Steve http://goodcf.instantspot.com/ Hi Steve, I got it to work with a cfc by doing something like this: <cffunction name="lookupEmail"> <cfargument name="search" /> <cfset var emailSearch = ListLast(arguments.search, ';')> <cfquery datasource="#application.ds#" name="data"> *SELECT* leemail *FROM* emailview *WHERE* ({ fn *UCASE*(leemail) } *LIKE* { fn*UCASE*('#emailSearch #%') }) *AND* (frn_leuserid = #*session*.callmeasurement_uid#) *ORDER* *BY* leemail </cfquery> </cffunction> HTH Dominic ----- Excess quoted text cut - see Original Post for more -----

Lol, yeh - I was only writing as example, completely untested. Instead of adding the space in the delimiter, try: <cfset var emailSearch = Trim(ListLast(arguments.search, ';')> Adding a space as a delimiter could give you unexpected results.. Dominic ----- Excess quoted text cut - see Original Post for more -----

Yeah, I tried using trim() but that didn't seem to fix the issue.  Seems like the only thing that worked was adding the space after the semicolon. '; ' ~Steve http://goodcf.instantspot.com/ Lol, yeh - I was only writing as example, completely untested. Instead of adding the space in the delimiter, try: <cfset var emailSearch = Trim(ListLast(arguments.search, ';')> Adding a space as a delimiter could give you unexpected results.. Dominic ----- Excess quoted text cut - see Original Post for more -----

Ok, different issue.  The autosuggest is working, but for some reason only returning 1 match only.  I can type in s and it will show me sgood@lanctr.com but if I type in st it will show me steve.good@anotherdomain.net.  But I want it to show both addresses when the user types in s.  I know this was working with the list example, so again, I think it has to do with my CFC.  Any ideas?  Sorry to be a pain today.  My brain is only running at 1/3 capacity. ~Steve http://goodcf.instantspot.com/

Hm, only thing I can think of is the maxResultsDisplayed property of the tag. Have you tried setting that explicitly? It default to 10 though... ----- Excess quoted text cut - see Original Post for more -----

I tried that, set it to 50.  I imagine that somehow my CFC is actually only returning 1 row... ~Steve http://goodcf.instantspot.com/ Hm, only thing I can think of is the maxResultsDisplayed property of the tag. Have you tried setting that explicitly? It default to 10 though... ----- Excess quoted text cut - see Original Post for more -----

Yeh, maybe - try calling it directly as you have it in the autosuggest property, replacing the cfautosuggest variable with 's'. Dominic ----- Excess quoted text cut - see Original Post for more -----

Blah, it is returning only the first row it queries...  But I figured it out...  I was actually only returning the first row with <cfreturn data.leemail>  I added some stuff to it and now I have <cfreturn listToArray(valueList(data.leemail))> and it returns all the results. ~Steve http://goodcf.instantspot.com/ Yeh, maybe - try calling it directly as you have it in the autosuggest property, replacing the cfautosuggest variable with 's'. Dominic ----- Excess quoted text cut - see Original Post for more -----

Kick ass Dom, can't wait to try this out! ~Steve http://goodcf.instantspot.com/ There is now a custom tag for an auto-suggesting cfinput with more than just enabling listed auto-suggests :) http://betterautosuggest.riaforge.org/ Dominic -- Blog it up: http://fusion.dominicwatson.co.uk