what's the value of an autosuggest input field?

Forum|Forum|16 years ago
December 1, 2009
3 replies
8541 views

Under normal circumstances, I can copy the content of the users's form field input into another field, just by simply javascripting (using onChange, and this.form.field.value).

In a CFInput field that does autosuggest (like in Ben Forta's simple examples), this doesn't work - 1) onChange behaves differently, and 2) the field value contains the original user search input, not the value that he chose from the suggested values.

How can I address the value that was chosen by the user?

Here's what I actually need to do:

I have a table with several columns and more than 70000 entries. There is a key column that users can choose from, and there is a text column that users can also choose from - either way should work. (Select fields don't work because there are too many values - it seems I have to use text fields with autosuggest.)

When the user chooses a numerical key value, the text field should be automatically filled with the corresponding text value. When the user instead chooses from the text values, the numerical key should automatically filled with the corresponding value. (This is what I tried to do with normal Javascript but it didn't work as explained above.)

To make things even more complicated, there are two more columns whose values should automatically be filled into the corresponding form fields as soon as the user has chosen a row.

I have no idea how to program this but I'm sure it is easily possible if one knows one's way around Ajax.

-Michael

This topic has been closed for replies.

M

MaRiEfLy

Participant

i do not know

P

Pope Jimbo

Participant

Take a look at this page. It is for 9.0.1, but I think it is exactly what you are looking for.

http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSd160b5fdf5100e8f-4439fdac128193edfd6-7f5e.html

I was trying to do something similar to you. I wanted to have someone typing in a serial number (there are thousands and thousands) be able to drill down and pick a specific one. When they selected the serial number, then I wanted to fire off some other events via ajax. I could never get the onChange event to fire.

I modified the example selctItem.cfm above to incorporate the page above. When you select something from the top item field, it will update the new middle field. Now it works pretty slick.

Here it is:

<html>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <head>
            <cfajaximport tags="cfinput-autosuggest">
            <script>
                  var init = function()
                  {
                        autosuggestobj = ColdFusion.Autosuggest.getAutosuggestObject('item');
                        autosuggestobj.itemSelectEvent.subscribe(foo);
                        alert("attaching item to foo");
                  }
                  var foo = function(event,args)
                  {
                        var msg  = "";
                        msg = msg + "Event: " + event + "\n\n";
                        msg = msg + "Selected Item: " + args[2] + "\n\n";
                        msg = msg + "Index: " + args[1]._nItemIndex + "\n\n";
                        alert(msg);
                        document.medform.stub.value = args[2];
                  }
                    function whatsUp() {
                        alert("OnChange occurred. Current field value: " + document.medform.item.value)
                    }
                    function show() {
                        alert(document.medform.item.value)
                    }
            </script>
      </head>
      <body>
            <h3>Attaching an event handler to the autosuggest object</h3>
            <cfform name="medform" action="#cgi.SCRIPT_NAME#">
                <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td>Item Name</td>
                    <td><cfinput autosuggest="cfc:medication.getItem({cfautosuggestvalue}, {itemNumber})" autosuggestminlength="1" type="text" name="item" size="50" typeahead="yes" onChange="whatsUp()"></td>
                </tr>
                <tr>
                    <td>Test</td>
                    <td><cfinput name="stub" value="" onChange="whatsUp()"></td>
                </tr>
                <tr>
                    <td>Item Number</td>
                    <td><cfinput autosuggest="cfc:Medication.getItemNumber({cfautosuggestvalue}, {item})" autosuggestminlength="1" type="text" name="itemNumber" size="50" typeahead="yes" value="11"></td>
                </tr>
                <tr>
                    <td> <cfinput type="submit" name="sbmt" value="Get item" onClick="show()"></td>
                </tr>
                </table>
            </cfform>
             <cfset ajaxOnLoad("init")>
      </body>
</html>

BKBK

Community Expert

You can use the bind attribute. It will override the current field entries. Could we see the code?

veloopityAuthor

Known Participant

not much of code here that goes beyond Ben Forta's code. The CFC:

<cffunction name="lookupPZN" access="remote" returntype="string">
        <cfargument name="search" type="any" required="false" default="">
        
        <cfset var data="">
        
        <cfquery datasource="#THIS.dsn#" name="data">
            SELECT         PZN + ' ' + Handelsname as PZN
            FROM         pznHandelsname
            WHERE         PZN LIKE '#ARGUMENTS.search#%'
            ORDER BY    PZN
        </cfquery>
        
        <cfreturn ValueList(data.PZN)>
    </cffunction>

    <cffunction name="lookupHandelsname" access="remote" returntype="string">
        <cfargument name="search" type="any" required="false" default="">
        
        <cfset var data="">
        
        <cfquery datasource="#THIS.dsn#" name="data">
            SELECT         Handelsname + ' {' + PZN + '}' as Handelsname
            FROM         pznHandelsname
            WHERE         Handelsname LIKE '#ARGUMENTS.search#%'
            ORDER BY    Handelsname
        </cfquery>
        
        <cfreturn ValueList(data.Handelsname)>
    </cffunction>
</cfcomponent>

The calling form fields:

BKBK

Community Expert

How do you do the onChange? I miss that attribute and the Javascript that makes the change.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded