带有远程数据的 JQuery 自动完成 (COLDFUSION) [英] JQuery AutoComplete with Remote Data (COLDFUSION)
问题描述
我是 JQuery 的新手，试图从 ColdFusion 查询中提取远程数据以显示在我的文本框中.
I'm a newbie with JQuery trying to pull remote data from a ColdFusion query to show in my textbox.
调用我的 CFC 时，我在 firebug 中收到错误消息:
I am receiving an error in firebug when calling my CFC:
未捕获的类型错误:无法使用in"运算符在 in 中搜索453"
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?
完整的 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 控制台中启用**启用请求调试输出**，我会看到以下错误:
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();
}
推荐答案
(由评论扩展...)
如此处所述，该错误表示代码期待解析后的 JSON 对象，但被传递了一个简单的 string 代替.jQuery 不会将您的 cfc 响应字符串解析为 JSON 对象.相反，它只是将纯字符串传递给 response() 函数，这会导致错误，因为该函数需要一个数组.没有自动解析响应的原因是 datatype 的大小写错误.应该是:
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"
顺便说一句，不要忘记var/local 作用域所有函数局部变量，包括查询名称.
As an aside, do not forget to var/local scope ALL of your function local variables, including query names.
更新:
我认为这里更简单的方法是将 cffunction 参数名称更改为 term 然后使用 URL 作为源.此外，由于您没有使用 cfform 的任何额外功能，因此不妨改用纯 html 元素.
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>
这篇关于带有远程数据的 JQuery 自动完成 (COLDFUSION)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
