带有远程数据的 JQuery 自动完成 (COLDFUSION)答案

【问题标题】：JQuery AutoComplete with Remote Data (COLDFUSION)带有远程数据的 JQuery 自动完成 (COLDFUSION)
【发布时间】：2014-03-15 03:18:06
【问题描述】：

我是 JQuery 的新手，试图从 ColdFusion 查询中提取远程数据以显示在我的文本框中。

调用我的 CFC 时，我在 firebug 中收到错误：

未捕获的类型错误：无法使用“in”运算符在 in 中搜索“453”

我不知道这可能意味着什么。我可以看到这是从我的数据库中提取数据，因为在控制台输出的更下方，我看到了我的数据：

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

谁能帮助解决这个错误？

完整的 HTML 代码：

<!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>

我的 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>

更新

进行建议的更改时，我的自动完成表单字段中仍然没有收到任何数据。如果我在我的 CFADMIN 控制台中启用**启用请求调试输出**，我会看到这个错误：

未捕获的类型错误：无法读取未定义的属性“文档”。

当我单击控制台输出中错误旁边的链接时，它会显示以下内容：

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();
}

【问题讨论】：

尝试将 <CFFORM> 和 <CFINPUT> 标签更改为常规 HTML <FORM> 和 <INPUT> 标签。您没有使用这些 ColdFusion UI 标签可以提供的任何额外功能，它们可能会破坏您的自定义 JavaScript。
你先搜索档案了吗？一个非常快速的搜索为该错误找到了几个线程：stackoverflow.com/questions/18502101/…。此外，在 both URL 和 cffunction 定义中指定 &returnformat=json 可能会导致问题。尝试从函数定义中删除它。通过在浏览器中调用方法来测试它http://yourserver.com/kb/cfcs/search.cfc?method=lookupTitle&returnformat=json&searchterm={somethinghere}
好的，所以将我的表单更改为 HTML 类型并从我的函数定义中删除 returntype="JSON" 没有任何效果。当我直接浏览我的 CFC 时，我看到我的数据输出如下： [{"value":1,"label":"Test article"}]

标签： jquery coldfusion

【解决方案1】：

（从 cmets 扩展...）

As mentioned here，该错误意味着代码期待一个解析的 JSON object，但却传递了一个简单的 string。 jQuery 不会将您的 cfc 响应字符串解析为 JSON 对象。相反，它只是将纯字符串传递给 response() 函数，这会导致错误，因为该函数需要一个数组。没有自动解析响应的原因是datatype 的大小写错误。应该是：

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

顺便说一句，不要忘记var/local 作用域所有函数局部变量，包括查询名称。

更新：

我认为这里更简单的方法是将 cffunction 参数名称更改为 term，然后使用 URL 作为源。此外，由于您没有使用 cfform 的任何额外功能，因此不妨改用纯 html 元素。

<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>

【讨论】：

进行了更改，现在它不会在 firebug 中抛出任何错误，但没有显示数据。在控制台或文本框中。
这听起来像是一个不同的问题。您可以使用独立的 HTML 测试页面更新您的问题吗？
不，我指的是完整的 html 测试页面（JS 包括、表单字段等）。基本上是一个独立的示例，任何人都可以插入并使用自己的 .cfc 运行。顺便说一句，我回滚了更新，因为没有原始错误消息..我的回答没有意义;-) 最好追加更改，而不是覆盖原始问题。
是的，任何地方都可以。大多数人在新文本前加上一个小标题，如“编辑”或“更新”，但这不是必需的。它更多是关于保留原始问题的上下文，因此遇到相同问题的下一个人可以在一个线程中阅读您遇到的问题和解决方案。
（编辑）查看我的更新回复。仅供参考：我修剪了更新的示例以仅包含相关的 HTML 代码。你最初拥有的是完美的。我只是想多看一点（JS 包含和表单字段）来验证 id 等是否正确:)