JQuery AutoComplete with Remote Data (COLDFUSION)

问题

I'm a newbie with JQuery trying to pull remote data from a ColdFusion query to show in my textbox.

I am receiving an error in firebug when calling my CFC:

Uncaught TypeError: Cannot use 'in' operator to search for '453' in

I don't know what this may mean. I can see that is pulling data from my database because further down in my console output, I see my data:

[{"value":1,"label":"Test article"}] jquery-1.10.2.js:997

Can anyone help on this error?

Full HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>

    <!---Autocomplete Script --->
    <link href="css/jquery-ui-1.10.4.custom.css" rel="stylesheet" type="text/css">
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/jquery-ui-1.10.4.custom.js"></script>
    <!---<script src="Scripts/auto_correct.js" type="text/javascript"></script> --->

    <script>
      $(function() {
             $( "#searchField" ).autocomplete({
                    source: function(request, response){
                        $.ajax({
                            url: "kb/cfcs/search.cfc?method=lookupTitle&returnformat=json",
                            dataType: "json",
                            data: {
                                searchterm: request.term
                            },
                            success: function(data){
                                response(data);
                            }
                        })
                    },
                    minLength: 3,
                    select: function(event, ui) {
                        $('#searchField').val(ui.item.value);
                        $('#defaultArticleID').val(ui.item.label);
                    }
                });
            });
      </script>

</head>

<body class="oneColFixCtrHdr">
  ...      
  <!--- Main Container --->
  <div id="container">
       <cfform name="doesntmatter" method="post">
           <label for="searchField">Search KB Articles</label>
           <cfinput type="text" id="searchField" name="searchField" size="30em;" value=""/> 
           <cfinput type="hidden" name="defaultArticleID" id="defaultArticleID" value="0" />
       </cfform>
  </div>
  ...

</body>
</html>

My CFC:

<cfcomponent>
    <cffunction name="lookupTitle" access="remote" output="no" 
          hint="I return a list of titles" returnformat="JSON">
        <cfargument name="searchterm" required="false" default="" />

        <!--- Define variables --->
        <cfset var returnArray =ArrayNew(1)>

        <!--- Do search --->
        <cfquery name="data" datasource="#datasource#">
            SELECT ID, title
            FROM kbArticles
            WHERE title LIKE <cfqueryparam cfsqltype="cf_sql_varchar" value="%#arguments.searchterm#%" />
        </cfquery>

        <!--- Build result array --->
        <cfloop query="data">
            <cfset titleStruct = structNew() />
            <cfset titleStruct['value'] = ID />
            <cfset titleStruct['label'] = title />

            <cfset arrayAppend(returnArray,titleStruct) />    
        </cfloop>

        <!--- And return it --->
        <cfreturn returnArray />
    </cffunction>
</cfcomponent>

UPDATE

When making the suggested changes, i still recieve no data in my autocomplete form field. If I enable ** Enable Request Debugging Output** in my CFADMIN console, I see this error:

Uncaught TypeError: Cannot read property 'document' of undefined .

When I click on the link next to the error in the console output, this is what it shows:

function writeToWindow( win ) {
    if( document.getElementById ) { // NS6
        // failing on <table ... 100%> for unescape() ?, and failing on writeCSS without unescape(), no the issue is with ns6 writing out the <link> tag for css
        // NS6 needs unescape() or else it writes 'showHide%28%27cf_debug_parameters%27,%27img_cf_debug_parameters%27%29;' for methods
        //win.document.write(unescape(document.getElementById("cf_debug").innerHTML));
        //NS6.2 wants it escaped
        win.document.write(document.getElementById("cf_debug").innerHTML);
    } else {
       win.document.write(document.all['cf_debug'].innerHTML);
    }
    win.document.close();
    win.focus();
}

回答1:

(Expanded from comments...)

As mentioned here, the error means the code was expecting a parsed JSON object, but was passed a simple string instead. jQuery is not parsing your cfc response string into a JSON object. Instead it is just passing the plain string into the response() function, which causes an error because that function expects an array. The reason the response is not parsed automatically is that datatype has the wrong case. It should be:

     dataType: "json"  // Note, upper case "T"

As an aside, do not forget to var/local scope ALL of your function local variables, including query names.

Update:

I think a simpler approach here would be to change the cffunction argument name to term then use a URL as the source. Also, since you are not using any of the extra features of cfform, may as well switch to plain html elements instead.

<script>
$(document).ready(function() {  
         $( "#searchField" ).autocomplete({
                source: "/kb/cfcs/search.cfc?method=lookupTitle&returnformat=json",
                minLength: 3,
                select: function(event, ui) {
                    $('#searchField').val(ui.item.value);
                    $('#defaultArticleID').val(ui.item.label);
                }
            });
        });
</script>  
...
<form>
    <label for="searchField">Search field: </label>
    <input id="searchField">
    <input id="defaultArticleID">
</form>

来源：https://stackoverflow.com/questions/21801780/jquery-autocomplete-with-remote-data-coldfusion

标签

jquery

coldfusion