Frank Fusion

Thursday, 3 April 2008

A better autosuggesting widget

Following on from my previous post about extending the cfinput auto-suggest functionality (a tidy autosuggesting solution), I decided that my solution was too narrow. I have now written a custom tag that allows access to all the useful properties of the auto-suggest widget.

The tag can be found @ http://betterautosuggest.riaforge.org/

Here is a quick and slim example of how it can be used:

<cfimport taglib="myCustomTagsFolder" prefix="custom">

<cfform action="" method="post">
<custom:betterautosuggest
name="fruit"
autosuggest="apple,banana,lemon,lime,mango,orange,peach,pear"
delimchar=";"/>
</cfform>



Enjoy :)

Labels: , ,

15 Comments:

  • Can I assume that I can use a bind to a URL for data?

    By Blogger larksys, At 19 August 2008 22:52  

  • It works in the same way as cfinput autosuggest="{whatever}". So yes. There is a known issue with queryMatchContains and cfc binding at the moment though. Will post about it on the riaforge project shortly.

    Dom

    By Blogger Dom, At 20 August 2008 07:24  

  • Hi Dom.... Any progress re it working with cfc binding? Cheers.

    By Blogger aaron, At 13 October 2008 00:48  

  • 'It' works but the queryMatchContains does not which I realise is a real pain.

    The problem is the way in which CF creates a new yui datasource for the widget when using a binding, overriding the settings set in the custom tag. I don't foresee any code within the custom tag addressing this issue but Mike Klostermeyer suggested this quick fix (which will work if you have only a single auto suggest):

    <cfajaximport scriptSrc="CFIDE/scripts" cssSrc="CFIDE/scripts/ajax"
    tags="cfinput-autosuggest">
    <script>
    try{
    YAHOO.widget.DataSource.prototype.queryMatchContains = true;
    } catch (hmm ){
    alert( hmm );
    }
    </script>

    If you're really needing to do this however, I'd suggest using the YUI widget directly. The YUI js library is really easy to use after you get started.

    HTH

    Dom

    By Blogger Dom, At 13 October 2008 09:29  

  • Great posts...

    For those of us using unix be carefull of case when using the example. custom:betterAutoSuggest.. is not the same as custom:betterautosuggest...

    Here's my error:The specified CFC userid could not be found

    when using: autosuggest="cfc:userid.lookupuserid({cfautosuggestvalue})"

    above cfc works finw without the betterAutoSuggest custom tag.

    Any assistance is greatly appreciated. - Tim

    By Blogger Tim, At 08 December 2008 17:24  

  • Hi Tim, the cfc binding has nothing to do with the custom tag; that is all done by cfinput. If you do a search on cfautosuggest and Ben Forta you'll find a great post on this and issues that people have come accross.

    Just a sanity check though - is your cfc really called 'userId' (as opposed to just 'user')?

    By Blogger Dom, At 08 December 2008 17:36  

  • Shouldn't autosuggest="{whatever}" work? I greatly appreciate your quick reply and any further assistance should you find the time.

    This works:
    <cfimport taglib="../betterautosuggest" prefix="custom">
    <cfform>
    Userid: <custom:betterAutoSuggest name="userid"
    autosuggest="apple,plum,orange"
    forceselection="true"
    typeahead="true"
    useShadow="false"/>
    </cfform>

    This works:
    <cfform>
    Userid: <cfinput type="text"
    name="userid"

    autosuggest="cfc:userid.lookupuserid({cfautosuggestvalue})">

    </cfform>

    This does not work:
    <cfimport taglib="../betterautosuggest" prefix="custom">
    <cfform>
    Userid: <custom:betterAutoSuggest name="userid"

    autosuggest="cfc:userid.lookupuserid({cfautosuggestvalue})"

    forceselection="true"
    typeahead="true"
    useShadow="false"/>
    </cfform>

    By Blogger Tim, At 08 December 2008 18:03  

  • Aha I see; it may be to do with the relativity of the path of the cfc to the calling template - which in this case is betterAutoSuggest.cfm. Perhaps you need to setup a mapping that you can use - or reference the cfc as if you were calling from the directory above (ie. "../").

    HTH

    By Blogger Dom, At 08 December 2008 22:06  

  • Very interesting... the actual CF error

    "The specified CFC userid could not be found.
    The path to the CFC must be specified as a full path, or as a relative path from the current template, without the use of mappings."

    An absolute & relative path to my cfc produces the above error. Not sure of the syntax needed but gave several attempts (ie: "../", "server.dir.dir.cfc", "expandpath function"...)

    A mapping to the directory containing the cfc has no problems.
    winner winner
    autosuggest="cfc:mappedDirWithCFC.userid.lookupuserid({cfautosuggestvalue})"

    (I assumed a mapping would not work as the absolute path did not work.)

    Also, my earlier blog entry was not totally accurate. The entry with the fruit list is not 100% functional. The showloadingicon is not displayed while idle or loading.

    Thanks again.

    By Blogger Tim, At 09 December 2008 02:29  

  • I am trying to test it on our server (windows 2003) and I not able to get it to work. Do I need to install it using coldfusion admin. Please help.

    By Blogger allen, At 14 January 2009 00:34  

  • I think i am getting a javascript error that coldfusion is undefined. You help would be appreciated.

    By Blogger allen, At 14 January 2009 01:13  

  • Hi allen, this is not to do with the custom tag but with CF8. Basically, you need to have /cfide/scripts available to your page (the js that cf8 produces sits in there). See this article:

    http://www.coldfusionguy.com/ColdFusion/blog/index.cfm/2007/11/13/CF8-AJAX-Features-CFIDEScripts-and-CFAjaxImport

    If this is not the issue, let me know.

    By Blogger Dom, At 14 January 2009 07:05  

  • Inerestingly I have been looking for a solution to the javascript warning 'ColdFusion is undefined' just yesterday.

    The datefield cfinput does not function. This only seems to happen randomly on IE6, but a page refresh fixes the issue. Then the issue remains dorment until temp internet files are removed from the browser.

    Generated tag by CF:
    <script type="text/javascript">
    ColdFusion.Ajax.importTag('CFINPUT-DATEFIELD');
    </script>

    I have a j2ee unix install so case matters, and here is my dir structure:\CFIDE\scripts\ajax\package

    Please help me understand the mappings. In the above tag, 'ColdFusion' should map to CFIDE? CF mapping or server mapping? Then 'Ajax'??

    By Blogger Tim, At 14 January 2009 14:54  

  • The 'ColdFusion' is not a CF mapping and does not relate to CF in anyway - client side code cannot directly access CF afterall. It will be a javascript namespace created in a .js include (in cfide/scripts).

    I believe I have seen this js error happening when other YUI javascript is being used in a page.

    For this, and other reasone, I now just use the YUI library (and others) directly without using the cf ajax tags.

    Dominic

    By Blogger Dom, At 14 January 2009 15:33  

  • Thank you Dom. After reading the article and fixing the cdide mapping, it worked great. Thank your for the quick response and help.

    Allen

    By Blogger allen, At 15 January 2009 03:00  

Post a Comment



<< Home