Highlighted

cfform autosuggest pass 2 values (locationname and locationid)

Explorer ,
Jun 24, 2014

Copy link to clipboard

Copied

Hi chaps,

I've decided it's about time I started using cfform (3 mins in and I've already hit my first stumbling block!)

I want to have an autosuggest text input for users to choose a city. In my db I have locationnames and locationids.

eg

locationid   |   locationname

----------------------------------------

1                   London

2                   New York

3                   Paris

etc

The user will start to type the locationame - I want autosuggest to show locationanames that match, but when they submit the form I actually want the locationid to be passed..

How on earth do I do this with cfform?

Thanks very much for any help you can offer.

Nick

Adobe Community Professional
Correct answer by BKBK | Adobe Community Professional

As one of the Stackoverflow posters says, and rightly, too, you have to account for the fact that different cities can have the same name. To do so, you could make your second form field a 'select'.

A select field is two-dimensional. You could therefore design it to hold location IDs (option values) and corresponding full distinguishing name (option display text, for example, Paris France, Paris Kiribati, Paris Ontario, Paris Texas).

Below is a fully worked out example. You can run it directly. It is based on your requirements, with employee first-names in place of location names. All you have to do is change the query and variable names to yours.

getEmployee.cfm

<cfif isDefined("form.firstName")>

<cfdump var="#form#">

</cfif>

<cfform name="empForm" id="empForm" action="#cgi.SCRIPT_NAME#">

<p>

Employee first name: <cfinput  autosuggest="cfc:employee.getFirstname({cfautosuggestvalue})" autosuggestminlength="1" type="text" name="firstName" size="50" typeahead="yes">

</p>

<p>

Employee ID: <cfselect name="employeeID" bind="cfc:employee.getEmpID({firstName})" />

</p>

<p>

<cfinput type="submit" name="sbmt" value="Send">

</p>

</cfform>

Employee.cfc

<cfcomponent>

    <cffunction name="getFirstName" access="remote" output="false" returntype="array">

        <cfargument name="suggestedValue" required="true" type="string">

        <cfset var getEmpFirstName = queryNew("","")>

        <cfset var fnameArray = arrayNew(1)>

        <cfquery name = "getEmpFirstName" dataSource = "cfdocexamples">

            SELECT FirstName

            FROM Employees

        </cfquery>

        <cfloop query="getEmpFirstName">

        <cfset fnameArray[currentrow]=FirstName>

        </cfloop>

        <cfreturn fnameArray>

    </cffunction>

    <cffunction name="getEmpID" access="remote" returntype="array">

        <cfargument name="fName" required="true" type="string">

        <cfset var getEmployee = queryNew("","")>

        <cfset var empArray = arrayNew(2)>

        <cfquery name = "getEmployee" dataSource = "cfdocexamples">

            SELECT Emp_ID, FirstName || ' ' || LastName as empName

            FROM Employees

            WHERE FirstName = '#arguments.fName#'

        </cfquery>

        <!--- Values for the first - the default - select option --->

        <cfset empArray[1][1]="">

        <cfset empArray[1][2]="Select employee">

        <cfloop query="GetEmployee">

        <cfset empArray[currentrow+1][1]=Emp_ID>

        <cfset empArray[currentrow+1][2]=empName>

        </cfloop>

        <!--- Alternative, if you require no "Select employee" option --->

        <!--- <cfloop query="GetEmployee">

        <cfset empArray[currentrow][1]=Emp_ID>

        <cfset empArray[currentrow][2]=empName>

        </cfloop> --->

        <cfreturn empArray>

    </cffunction>

</cfcomponent>

In any case, as other posters have already suggested, you should consider investing some time in alternative solutions to cfform. For example, JQuery form.

TOPICS
Advanced techniques

Views

358

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

cfform autosuggest pass 2 values (locationname and locationid)

Explorer ,
Jun 24, 2014

Copy link to clipboard

Copied

Hi chaps,

I've decided it's about time I started using cfform (3 mins in and I've already hit my first stumbling block!)

I want to have an autosuggest text input for users to choose a city. In my db I have locationnames and locationids.

eg

locationid   |   locationname

----------------------------------------

1                   London

2                   New York

3                   Paris

etc

The user will start to type the locationame - I want autosuggest to show locationanames that match, but when they submit the form I actually want the locationid to be passed..

How on earth do I do this with cfform?

Thanks very much for any help you can offer.

Nick

Adobe Community Professional
Correct answer by BKBK | Adobe Community Professional

As one of the Stackoverflow posters says, and rightly, too, you have to account for the fact that different cities can have the same name. To do so, you could make your second form field a 'select'.

A select field is two-dimensional. You could therefore design it to hold location IDs (option values) and corresponding full distinguishing name (option display text, for example, Paris France, Paris Kiribati, Paris Ontario, Paris Texas).

Below is a fully worked out example. You can run it directly. It is based on your requirements, with employee first-names in place of location names. All you have to do is change the query and variable names to yours.

getEmployee.cfm

<cfif isDefined("form.firstName")>

<cfdump var="#form#">

</cfif>

<cfform name="empForm" id="empForm" action="#cgi.SCRIPT_NAME#">

<p>

Employee first name: <cfinput  autosuggest="cfc:employee.getFirstname({cfautosuggestvalue})" autosuggestminlength="1" type="text" name="firstName" size="50" typeahead="yes">

</p>

<p>

Employee ID: <cfselect name="employeeID" bind="cfc:employee.getEmpID({firstName})" />

</p>

<p>

<cfinput type="submit" name="sbmt" value="Send">

</p>

</cfform>

Employee.cfc

<cfcomponent>

    <cffunction name="getFirstName" access="remote" output="false" returntype="array">

        <cfargument name="suggestedValue" required="true" type="string">

        <cfset var getEmpFirstName = queryNew("","")>

        <cfset var fnameArray = arrayNew(1)>

        <cfquery name = "getEmpFirstName" dataSource = "cfdocexamples">

            SELECT FirstName

            FROM Employees

        </cfquery>

        <cfloop query="getEmpFirstName">

        <cfset fnameArray[currentrow]=FirstName>

        </cfloop>

        <cfreturn fnameArray>

    </cffunction>

    <cffunction name="getEmpID" access="remote" returntype="array">

        <cfargument name="fName" required="true" type="string">

        <cfset var getEmployee = queryNew("","")>

        <cfset var empArray = arrayNew(2)>

        <cfquery name = "getEmployee" dataSource = "cfdocexamples">

            SELECT Emp_ID, FirstName || ' ' || LastName as empName

            FROM Employees

            WHERE FirstName = '#arguments.fName#'

        </cfquery>

        <!--- Values for the first - the default - select option --->

        <cfset empArray[1][1]="">

        <cfset empArray[1][2]="Select employee">

        <cfloop query="GetEmployee">

        <cfset empArray[currentrow+1][1]=Emp_ID>

        <cfset empArray[currentrow+1][2]=empName>

        </cfloop>

        <!--- Alternative, if you require no "Select employee" option --->

        <!--- <cfloop query="GetEmployee">

        <cfset empArray[currentrow][1]=Emp_ID>

        <cfset empArray[currentrow][2]=empName>

        </cfloop> --->

        <cfreturn empArray>

    </cffunction>

</cfcomponent>

In any case, as other posters have already suggested, you should consider investing some time in alternative solutions to cfform. For example, JQuery form.

TOPICS
Advanced techniques

Views

359

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 24, 2014 0
Most Valuable Participant ,
Jun 24, 2014

Copy link to clipboard

Copied

Question cross-posted on Stackoverflow also, and has a few responses already.

-Carl V.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 24, 2014 0
Adobe Community Professional ,
Jun 25, 2014

Copy link to clipboard

Copied

Carl and Happysailingdude,

Sorry about the confusion. I had intended to respond to Happysailingdude, and have duly made the correction.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 25, 2014 0
Adobe Community Professional ,
Jun 25, 2014

Copy link to clipboard

Copied

As one of the Stackoverflow posters says, and rightly, too, you have to account for the fact that different cities can have the same name. To do so, you could make your second form field a 'select'.

A select field is two-dimensional. You could therefore design it to hold location IDs (option values) and corresponding full distinguishing name (option display text, for example, Paris France, Paris Kiribati, Paris Ontario, Paris Texas).

Below is a fully worked out example. You can run it directly. It is based on your requirements, with employee first-names in place of location names. All you have to do is change the query and variable names to yours.

getEmployee.cfm

<cfif isDefined("form.firstName")>

<cfdump var="#form#">

</cfif>

<cfform name="empForm" id="empForm" action="#cgi.SCRIPT_NAME#">

<p>

Employee first name: <cfinput  autosuggest="cfc:employee.getFirstname({cfautosuggestvalue})" autosuggestminlength="1" type="text" name="firstName" size="50" typeahead="yes">

</p>

<p>

Employee ID: <cfselect name="employeeID" bind="cfc:employee.getEmpID({firstName})" />

</p>

<p>

<cfinput type="submit" name="sbmt" value="Send">

</p>

</cfform>

Employee.cfc

<cfcomponent>

    <cffunction name="getFirstName" access="remote" output="false" returntype="array">

        <cfargument name="suggestedValue" required="true" type="string">

        <cfset var getEmpFirstName = queryNew("","")>

        <cfset var fnameArray = arrayNew(1)>

        <cfquery name = "getEmpFirstName" dataSource = "cfdocexamples">

            SELECT FirstName

            FROM Employees

        </cfquery>

        <cfloop query="getEmpFirstName">

        <cfset fnameArray[currentrow]=FirstName>

        </cfloop>

        <cfreturn fnameArray>

    </cffunction>

    <cffunction name="getEmpID" access="remote" returntype="array">

        <cfargument name="fName" required="true" type="string">

        <cfset var getEmployee = queryNew("","")>

        <cfset var empArray = arrayNew(2)>

        <cfquery name = "getEmployee" dataSource = "cfdocexamples">

            SELECT Emp_ID, FirstName || ' ' || LastName as empName

            FROM Employees

            WHERE FirstName = '#arguments.fName#'

        </cfquery>

        <!--- Values for the first - the default - select option --->

        <cfset empArray[1][1]="">

        <cfset empArray[1][2]="Select employee">

        <cfloop query="GetEmployee">

        <cfset empArray[currentrow+1][1]=Emp_ID>

        <cfset empArray[currentrow+1][2]=empName>

        </cfloop>

        <!--- Alternative, if you require no "Select employee" option --->

        <!--- <cfloop query="GetEmployee">

        <cfset empArray[currentrow][1]=Emp_ID>

        <cfset empArray[currentrow][2]=empName>

        </cfloop> --->

        <cfreturn empArray>

    </cffunction>

</cfcomponent>

In any case, as other posters have already suggested, you should consider investing some time in alternative solutions to cfform. For example, JQuery form.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 25, 2014 0
Explorer ,
Jun 25, 2014

Copy link to clipboard

Copied

Thank chaps - as was suggested to me I've gone with a jquery solution - Select2 3.5.0 (which seems to work very well)

It's a shame that cf experts seem to be recommending we leave the cf front end stuff alone but there we go..

Thank you both for your replies - much appreciated.

Best regards,

Nick

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 25, 2014 0
Most Valuable Participant ,
Jun 25, 2014

Copy link to clipboard

Copied

happysailingdude,

At the time the CF UI tags were first introduced, they made a lot of sense.  Back then, JavaScript was a "dark art" that most application developers weren't proficient in.  The CF UI tags provided a lot of rich UI functionality with little learning required. 

Fast forward a decade or so, and the expectation is that application developers must have a working knowledge of and ability to use JavaScript.  There is also a tremendous proliferation of open source JavaScript/CSS UI libraries that greatly exceed the capabilities of the CF UI tags, and are more easily extended and customized (Bootstrap, Ionic, jQuery UI, Dojo, Sencha, etc.).  Also, the underlying JavaScript libraries used by the CF UI tags (mostly ExtJS) have not been updated in a long, long time - so they aren't HTML5 compliant and many bugs or enhancements that are available in the current release of ExtJS are not available in CF.  Lastly, the CF UI tags didn't implement every feature of the underlying libraries; as a result many "cf experts" ran into roadblocks trying to implement complex UI interactions with just CF UI tags and refactored their code to directly use open source JavaScript/CSS libraries.

That's why you'll see so many "cf experts" steering people clear of the CF UI stuff.  There's even a community resource to help people learn how to use alternatives to CF UI tags: CF-UI-The-Right-Way.

-Carl V.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 25, 2014 0