我研究的每个教程和示例都足以使我感到非常沮丧。我有一个使用Twitter Bootstrap和jQuery的Coldfusion页面。我需要自动完成功能才能列出学校。这应该很容易。我完全没有回应。而且没有错误（我可以使用开发工具找到）。
经过这么多尝试，这可能有点不合时宜。 IE;我不知道source: '/assets/cf/fetchColleges.cfm'和ajax调用之间的区别。我认为源是本地/客户端数据源。
HTML：
<div class="row">
<div class="span9">
<input size="34" type="text" name="CollegeName" id="CollegeName" value="" />
<div id="results"></div>
</div>
</div>
jQuery的：
jQuery( document ).ready(function($) {
$("#CollegeName").autocomplete({
source: '/assets/cf/fetchColleges.cfm',
minLength: 3,
select: function(event, ui) {
$('#company_id').val(ui.item.id);
// go get the company data
$.ajax({
type: 'Get',
url: '/services/GradTax.cfc?method=GetSchoolsJson&returnformat=json',
data: {searchPhrase: query.term},
dataType: 'json',
error: function(xhr, textStatus, errorThrown) {
// show error
alert(errorThrown)},
success: function(result) {
response(result);
}
});
}
});
});
氟氯化碳：
<cffunction name="GetSchoolsJson" access="remote" >
<cfargument name="QueryString" required="true" />
<cfquery name="QComp" datasource="#request.dsn_live#">
select name
from companies
WHERE School_Flag = 'True' AND [Name] LIKE '%#Request.QueryString#%' AND (Status_Flag IS NULL OR Status_Flag = 'A') AND Grad_Tax_Flag = 'True'
ORDER BY [NAME] ;
</cfquery>
<cfset var comp = structNew() />
<cfoutput query="QComp">
<cfset comp["name"] = '#qcomp.name#' />
</cfoutput>
<cfreturn comp>
</cffunction>
最佳答案
source选项绝对不需要是静态的。实际上，我认为这主要是您对小部件的声明和选项的指定有问题。看来您正在使用GradTax.cfc作为动态源。因此，您需要将source选项设置为通过AJAX调用动态源的函数。如果source选项内的AJAX成功，则调用声明response中提供的source: function(request, response)回调。 jQuery将函数签名指定为要提供动态结果的函数所必需的签名。在这种情况下，request在自动完成框中包含有关当前输入的信息（您可以使用request.term来传递要自动完成的内容，并且response表示一旦您的AJAX函数将被调用的回调函数完成，请参见jQuery UI documentation中的更多内容。
您可以搜索source选项，以查看与我上面提供的几乎相同的信息。您需要做的（或至少接近完成）（未经过方式测试）：
jQuery( document ).ready(function($) {
$("#CollegeName").autocomplete({
source: function (request, response) {
$.ajax({
type: 'Get',
url: '/services/GradTax.cfc?method=GetSchoolsJson&returnformat=json',
data: {searchPhrase: request.term},
dataType: 'json',
error: function(xhr, textStatus, errorThrown) {
// show error
alert(errorThrown)
},
success: function(result) {
response(result); //Need to make sure result is an array of objects at
// least containing the necessary properties used by
// jQuery autocompleter. Each object should, I believe,
// contain a 'label' and a 'value' property. See docs for an example:
// http://jqueryui.com/autocomplete/#remote-jsonp
}
});
},
minLength: 3,
select: function(event, ui) {
$('#company_id').val(ui.item.id);
//this should take care of what needs to happen when you actually click / select one of the items that was autocompleted. See documentation above and search for the 'select' option for usage.
}
});
});
关于jQuery remote jsonp data source Demo，请注意，在上面的AJAX成功回调中，来自AJAX调用的响应不必是包含
value和label属性的对象数组，而是传入的对象到response回调确实需要那些。这就是jQuery演示的工作原理。他们根据其ajax响应将$.map响应手动为包含value和label的对象数组。 label是自动完成器界面中实际显示的内容，即用户看到的内容，而value是设置为原始输入值的内容。请注意，在上面的示例中，value选项中也使用了select。这不是世界上最简单的事情，但是当您看到正在发生的事情时，使用它还不错！在这里，它在JSFiddle中工作。因为将不会找到自动完成端点，所以将得到404，但是您会看到您是否在观看开发人员工具，查看要自动完成的文本是否已在查询字符串中传递（您会收到警告，指出存在错误） ，这是基本的概念证明。