Blog

26Mar
2007
Scorpio Auto-Suggest Control

Last week Tim and I showed off some of the Ajax functionality that we are working on for the upcoming ColdFusion Scorpio. One of the controls we demonstrated was an auto-suggest control implemented as an extension to the existing <cfinput>l tag. As demonstrated, the tag can be used in two ways. It can use a hard coded list, like this:

view plain print about
1<cfinput type="text"
2    name="fruit"
3    autosuggest="apple,banana,lemon,lime,mango,orange,peach,pear">

Of course, the list need not be static, it could be programmatically generated at runtime as needed. This is an ideal option for shorter lists.

For longer lists the suggestions can be populated via asynchronous calls back to a ColdFusion Component on the server after a delay in typing. The syntax would look something like this:

view plain print about
1<cfinput type="text"
2    name="fruit"
3    autosuggest="cfc:fruit.getFruit({cfautosuggestvalue})">

This points to a CFC named fruit.cfc in the same folder and invoked a method named getFruit() passing the current field value as an argument. The invoked method receives that argument as a string, does whatever processing it needs (perhaps using it in a ) and then returns results which are then used to populate the list.

Of course, all of this is subject to change, but you get the idea.

Related Blog Entries

Comments (10)



  • Dale Fraser

    Ben,

    Thats a very nice feature, there are so many new things in CF8 that I actually missed that one, wonder how many others i've missed.

    This will be the best CF release yet, great work. I'm counting the days until I can buy the upgrade.

  • Lola LB

    I can see how this would be very, very useful. Looking forward to playing around with Scorpio . . .

    #2Posted by Lola LB | Mar 27, 2007, 06:47 AM
  • Dan

    I'd much rather be working on the back end CFCs, so things like are wonderful to see. I can't wait.

    Hopefully, we'll also get the necessary functions or CFC output types to easily format something like query data into a format that is usable by this cfinput type. Thank you guys for putting great stuff like this into 8. :-)

    #3Posted by Dan | Mar 27, 2007, 12:13 PM
  • Ben Forta

    Dan, I agree, all of the obvious types should be directly supported. The version that Tim and I used requires that the CFC method return an array, but we're not done yet.

    --- Ben

    #4Posted by Ben Forta | Mar 27, 2007, 12:18 PM
  • Michael van Leest

    Maybe something like would be a nice enhnacement for this EXCELLENT feature:

    <cfinput type="text" name="fruit" autosuggesttype="query || array || list(default)" autosuggestcolumn="fruitname" />

    - Give the autosuggest a different datatype, like a query or array instead of the default list
    - When a different datatype is selected, provide the name of the column where to find it

    It's a lot to ask, but just my 2 cents....

  • Ben Forta

    Michael, nah, if we support more types then the detection should be automatic. This is ColdFusion, it's all about doing less to get more done! ;-)

    --- Ben

    #6Posted by Ben Forta | Mar 30, 2007, 12:16 PM
  • Michael van Leest

    Even better if you would consider it.... :-)

  • Doug Cain

    Can you define / change the maximum number of suggestions that are shown?

    Seems like quite a small max number, having a similar issue with valuesdisplay in the html cfgrid only showing 12 values max in any drop down.

    #8Posted by Doug Cain | Aug 31, 2007, 08:32 AM
  • Travis

    Is it possible to pass another argument to the cfc with the cfautosuggestvalue

    #9Posted by Travis | Apr 9, 2008, 07:12 PM
  • Shirak

    Ben,
    Autosuggest is really cool tool. When I'm typing to search mortgage company name (as an example) I want to pick the value (MortgageCode in this case) not the name.
    I know cfselect will do the job but unfortunately the editable attribute for cfselet is not working the user can type inside the cfselect.
    Is there away to solve this?

    #10Posted by Shirak | Jan 16, 2009, 06:31 PM