Question

我研究的每个教程和示例都足以让我感到非常沮丧。我有一个使用Twitter Bootstrap和jQuery的Coldfusion页面。我需要一个自动完成功能来列出学校。这应该很容易。我完全没有回应。并且没有错误（我可以使用开发工具找到）。

经过这么多尝试后，这可能会成为一个障碍。 IE浏览器;我不知道source: '/assets/cf/fetchColleges.cfm'和ajax调用之间的区别。我认为source是本地/客户端数据源。

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

CFC：

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

Answer 1

source选项绝对不一定是静态的。事实上，我认为这主要是你的小部件声明和选项规范的错误。您似乎使用GradTax.cfc作为动态来源。因此，您需要将source选项设置为通过AJAX调用动态源的函数。在source选项中的AJAX成功之后，您可以调用声明response中提供的source: function(request, response)回调。如果要使用提供动态结果的函数，那么jQuery将指定该函数签名。在这种情况下，request包含有关您可以使用的自动填充框中当前输入的信息（您使用request.term将传递给自动填充，以及{{1}表示在AJAX函数完成后将调用的回调函数。请参阅jQuery UI documentation中的更多内容。

您可以搜索response选项，以查看与上面提供的相同的信息。你需要做什么（或至少接近它）是（没有经过测试）：

source

参考jQuery remote jsonp data source Demo，请注意，在上面的AJAX成功回调中，来自AJAX调用的响应不会需要成为包含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. } }); });的对象数组和value属性，但传递给label回调的对象确实需要具有这些属性。这正是jQuery演示的工作原理。他们根据其ajax响应手动response响应为包含$.map和value的对象数组。 label是实际显示在自动完成器界面中的内容，即用户将看到的内容，而label是设置为原始输入值的内容。请注意，在上面的示例中，value选项中也使用了value。这不是世界上最直接的事情，但当你看到正在发生的事情时，它并不太糟糕！

这是在JSFiddle中工作的。因为找不到自动完成端点，所以会得到404，但是你会看到你是否看到开发人员工具要在查询字符串中传递要自动填充的文本（你会收到警告说有错误），这是一个基本的概念验证。

使用Coldfusion远程数据源进行jQuery自动完成

1 个答案: