用冷融合远程数据源实现jQuery的自动完成

Question

我所研究的每一个教程和例子都足以让我感到沮丧。我有一个使用Twitter引导和jQuery的冷融合页面。我需要一个自动完成的功能来列出学校。这应该很简单。我一点反应也没有。并且没有错误(我可以找到使用开发工具)。

经过这么多的尝试，这可能有点像个模棱两可的故事。我不知道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);
                }
            });
        }
    }); 
});

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成功，您可以调用声明source: function(request, response)中提供的response回调。如果要有一个提供动态结果的函数，则jQuery将该函数签名指定为所需的内容。在这种情况下，request包含有关您可以使用的自动完成框中当前输入的信息(使用request.term传递要自动完成的内容，而response表示将在AJAX函数完成后被调用的回调函数。请参阅jQuery UI文档中的更多内容。

您可以搜索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远程jsonp数据源演示，请注意，在上面的AJAX成功回调中，来自AJAX调用的响应不需要是包含value和label属性的对象数组，但是传递给response回调的对象需要有这些响应。这正是jQuery演示的工作方式。他们手动$.map响应为包含value和label的对象数组，基于它们的ajax响应。label是自动完成器接口中实际显示的内容，即用户将看到的内容，而value是设置为原始输入值的内容。注意，在上面的示例中，value也在select选项中使用。这不是世界上最直截了当的事情，但当你看到正在发生的事情时，这并不是太糟糕的工作！

在这里，它在JSFiddle中工作。这将得到404，因为将找不到自动完成端点，但您将看到开发人员工具，即要自动完成的文本在查询字符串中传递(您会收到警告说有错误)，这是基本的概念证明。