Question

I’m stumped. I have an existing autocomplete function which worked when called from a ColdFusion autosuggest input. Now, I’m trying to convert the page to use a jQuery autocomplete input, and can’t make it work. Here’s the existing function, in autosuggest.cfc:

<cffunction name="lookupSerialNumber" access="remote" returntype="Array" >
    <cfargument name="search" type="any" required="false" default="">

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

    <!--- Do search --->
    <cfquery name="data">
        SELECT DISTINCT SERIAL_NUMBER
        FROM myTable
        WHERE SERIAL_NUMBER LIKE '%#trim(ARGUMENTS.search)#%'
        ORDER BY SERIAL_NUMBER
    </cfquery>

    <!--- Build result array --->
    <cfloop query="data">
        <cfset ArrayAppend(result, list)>
    </cfloop>

    <!--- And return it --->
    <cfreturn result />
</cffunction>

When I call it from my autocomplete input after entering “01”, the Console shows a response like this:

   ["0000003001","0100002000","0100002001","0100002002","0100002003","0100002004",7300000100,7300000101,7300000102,7300000103,7300000104,7300000105,7300000107,7300000108,7300000109,7300000110,7300000111,7300000112]

Note that the first six responses are inside double quotes, while the rest are not. The autocomplete shows the first six responses, but not the rest.

So that’s my first problem. The second is that I want the response to be injected into both the text and the value of the input; currently, only the text shows the response. I’m not surprised, as I’m only returning a single value. However, I can’t figure out how to accomplish this.

I’ve tried initializing the autocomplete with a parse function, like so:

$(document).ready(function(){
        $('#myInputID').autocomplete(
            {source: function(request, response) {
                $.ajax({
                    url: "cfc/autoSuggest.cfc?method=lookupSerialNumber>&returnformat=json",
                    dataType: "json",
                    data: {
                      search: request.term,
                      maxRows: 10
                    },
                    success: function(data) {
                      response(data);
                    }                   
                })
            },
            parse: function(data){
                return $.map(data, function(item) {
                    return { data: item, value: item, result: item };
                });
            }
        });
    });

but this accomplishes nothing. Since the parse function isn’t in the autocomplete API, I’m flying blind here.

I figured that these problems were related enough to not split them out into two questions; let me know if you think I should. As always, thanks.

Answer 1

Put your query results in a structure and add that to an array. Then convert to json. The autocomplete is expecting json back and either a label or a value field or both. Here is an example:

<cffunction name="lookupSerialNumber" access="remote" returntype="String" >
    <cfargument name="search" type="any" default="">

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


    <!--- Do search --->
    <cfquery name="data">
        SELECT DISTINCT SERIAL_NUMBER
        FROM myTable
        WHERE SERIAL_NUMBER LIKE <cfqueryparam value="%#trim(ARGUMENTS.search)#%" 
                                     cfsqltype="cf_sql_varchar">

        ORDER BY SERIAL_NUMBER
    </cfquery>

    <!--- Build result array --->
    <cfloop query="data">
        <cfset returnStruct = StructNew() />
        <cfset returnStruct["label"] = SERIAL_NUMBER />

        <cfset ArrayAppend(result,returnStruct) />
    </cfloop>

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

You can use the serializeJSON function if it’s available in whatever version of CF you are using. If not, build the json string by hand.

Here is a tut: http://www.jensbits.com/2010/03/18/jquery-ui-autocomplete-with-coldfusion/