5 Replies Latest reply on Jun 25, 2014 8:56 AM by Carl Von Stetten

    cfform autosuggest pass 2 values (locationname and locationid)

    happysailingdude Level 1

      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

        • 1. Re: cfform autosuggest pass 2 values (locationname and locationid)
          Carl Von Stetten Adobe Community Professional & MVP

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

          -Carl V.

          • 2. Re: cfform autosuggest pass 2 values (locationname and locationid)
            BKBK Adobe Community Professional & MVP

            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.

            • 3. Re: cfform autosuggest pass 2 values (locationname and locationid)
              BKBK Adobe Community Professional & MVP

              Carl and Happysailingdude,

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

              • 4. Re: cfform autosuggest pass 2 values (locationname and locationid)
                happysailingdude Level 1

                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

                • 5. Re: cfform autosuggest pass 2 values (locationname and locationid)
                  Carl Von Stetten Adobe Community Professional & MVP

                  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.