个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-01 01:23:43 24 4
gpt4 key购买 nike

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

调用 CFC 时，我在 Firebug 中收到错误:

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

我不知道这意味着什么。我可以看到它正在从我的数据库中提取数据，因为在我的控制台输出中，我看到了我的数据:

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

最佳答案

(根据评论扩展...)

As mentioned here ，该错误意味着代码需要解析的 JSON 对象，但传递的是一个简单的字符串。 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>

关于带远程数据的 JQuery 自动完成 (COLDFUSION)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21801780/

24 4 0
文章推荐： jquery - 使用 Ember.js 正确 Hook domready
文章推荐： javascript - 正确/错误取决于屏幕尺寸动态？
文章推荐： javascript - 如何使用函数交织给定的字符串
文章推荐： jquery - jQuery 代码的优化
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com