Question

In using jQuery Autosuggest, users are able to start entering a part number and autosuggest shows a list of similar parts. Once a part is select, I want the description to appear in a textbox next to the part number. The part numbers and description are coming back from the CFC, but I am unable to get the part description to appear in the part description text box. how can I do this?

The form with jQuery:

<form action="index.cfm?action=reports:part.test"  method="post">
<fieldset>
    <legend>test</legend>
    <p>Start typing a part number.</p>
    <p>
        <label for="partnum">Part Number: </label>
            <input type="text" id="partnum"  name="partnum" />
            <input readonly="readonly" type="text" id="partdescription" name="partdescription" />
    </p>
    <p>
            <input type="submit" name="submit" value="Submit" />
    </p>
</fieldset>
</form>


<cfsavecontent variable="datatables_definitions">
<!-- added by user.list --> 
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
$(document).ready(function(){



        $('#partnum').autocomplete(
            {source: function(request, response) {
                $.ajax({
                    url: "/reports/services/remote/partSuggest.cfc?method=lookUpPart&returnformat=json",
                    dataType: "json",
                    data: {
                      search: request.term,
                      maxRows: 10
                    },
                    success: function(data) {
                      response(data);
                      $('#partdescription').val(partdescription);
                    },

            })
            },
            parse: function(data){
                return $.map(data, function(item) {
                    return { data: item, value: item, result: item };
                });
            }

        });
    });
</SCRIPT>
</cfsavecontent>

<cfhtmlhead text="#datatables_definitions#" />

The CFC doing the query:

<cfcomponent output="false">
    <cffunction name="lookUpPart" access="remote" returntype="any" >
        <cfargument name="search" type="any" required="false" default="">
        <cfargument name="datasource" type="string" required="no" default="myDSN">

        <!--- Define variables --->
        <cfset var data="">
        <cfset var result=ArrayNew(1)>

        <!--- Do search --->
        <cfquery name="getPart" datasource="#arguments.datasource#">
            SELECT top 20 partnum, partdescription
            FROM part
            WHERE partnum LIKE '%#trim(arguments.search)#%'
            ORDER BY partnum
        </cfquery>

        <!--- Build result array --->
        <cfloop query="getPart">
            <cfset returnStruct = StructNew() />
            <cfset returnStruct["partnum"] = partnum />
            <cfset returnStruct["partdescription"] = partdescription />
            <cfset ArrayAppend(result,returnStruct) />
        </cfloop>

        <!--- And return it --->
        <cfreturn serializeJSON(result) />
    </cffunction>
</cfcomponent>

Again, once the user successfully selects a part number from the list, I want the associated part description to appear in the partdescription box next to the part number.

Thanks.

Answer 1

This ended up working:

$('#partdescription').val(ui.item.partdescription);