2

我研究的每个教程和示例都足以“偏离”我需要让它非常令人沮丧的东西。我有一个使用 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>
4

1 回答 1

4

该source选项绝对不必是静态的。事实上，我认为这主要是您声明小部件和选项规范的问题。看起来您正在GradTax.cfc用作动态源。因此，您需要将source选项设置为通过 AJAX 调用动态源的函数。在source选项内的 AJAX 成功时，您调用response声明中提供的回调source: function(request, 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数据源Demo，注意上面的AJAX成功回调中，AJAX调用的响应不需要value是包含a和属性的对象数组label，而是传入response回调的对象确实需要那些。这正是 jQuery 演示的工作原理。他们手动将响应变为包含并基于其 ajax 响应$.map的对象数组。是自动完成器界面中实际显示的内容，即用户将看到的内容，而设置为原始输入值的内容。请注意，在上面的示例中，这也用于valuelabellabelvaluevalueselect选项。这不是世界上最直接的事情，但是当你看到发生的事情时，使用它并不算太糟糕！

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

于 2013-08-07T04:04:36.097 回答