将额外变量传递给 CFC 用于 Jqueryui 自动完成的 DB 过滤器

Question

我有一个 jQueryUI 自动完成功能，但我意识到数据集有点太大而无法在没有额外过滤器的情况下查看。我正在寻找一系列“产品”，但需要通过过滤“产品系列”来进一步缩减列表。

我使用 ColdFusion 作为后端，因此我将查找值传递给查询 Oracle 数据库的 CFC。

我想出的（可能是更好的解决方案，我只是没想到）是选择“产品系列”。我想将 product_family_id 与搜索词一起传递回 CFC，使用 product_family_id 作为查询中的过滤器。这是我目前所拥有的：

$(document).ready(function() {

    // autocomplete function   
    $("#primary_failing_product").autocomplete({

        source: "../../cfc/mwwf_software.cfc?method=lookup_product"
        select: function(event,ui) {
            $("#uid").val(ui.item.id)
        },
        search: function() {
                // custom minLength
                var term = ( this.value );
                if ( term.length < 2 ) {
                    return false;

                }

        }
    });

    // clear search box and hidden uid box
    $("#primary_failing_product").change(function(e) {
        if($(this).val() == "") {
            $("#uid").val("")
        };
    });
})

这里是cfc：

<cffunction name="lookup_product" access="remote" returnformat="json">
    <cfargument name="term" required="yes" />

    <cfset prod_array = ArrayNew(2) />

    <!--- Do search --->
    <cfquery datasource="#datasource#" name="data" maxrows="20">
        SELECT DISTINCT PRODUCT, PRODUCT_ID
        FROM  BEMS_ENGAGEMENT_DETAILS_VW
        WHERE BUSINESS_UNIT IN ('MWWF', 'HCCB') 
        AND   PRODUCT IS NOT NULL 
        AND   LOWER(PRODUCT) LIKE <cfqueryparam cfsqltype="CF_SQL_VARCHAR" value="%#ARGUMENTS.term#%" />
        ORDER BY PRODUCT
    </cfquery>

    <!--- Build result array --->
    <cfloop query="data">
        <cfset prod_struct = StructNew() />
        <cfset prod_struct['id'] = product_id />
        <cfset prod_struct['label'] = product />

        <cfset ArrayAppend(prod_array, prod_struct) />
    </cfloop>

    <!--- And return it --->
    <cfreturn prod_array />
</cffunction>

这只是具有太多值的有效自动完成查找。我添加了 ID=product_family_id 的 select。我在javascript中添加了以下内容

var q_param
$('#product_family_id').on('change', function() {
        q_param = $("#product_family_id option:selected").val();
        alert(q_param)

这提醒我，只是为了测试，所以我可以看到它正在获取正确的product_family_id，但我不知道如何将该值传递给自动完成功能。

我把“来源”调整为阅读，

../../cfc/mwwf_software.cfc?method=lookup_product&q_param=" + q_param

但是，在查看 firebug 时，我可以看到作为空字符串传递的变量破坏了 cfc。

有没有更好的方法来处理这个问题，或者有没有办法将更新的 q_param 拉入自动完成小部件以传递给 cfc？

Answer 1

我建议使用source: function(){} 作为替代方法。例如：

$("#primary_failing_product").autocomplete({
  source: function(request, response){
    $.getJSON("../../cfc/mwwf_software.cfc", {
      method: "lookup_product",
      q_param: $("#product_family_id").val(),
      term: request.term
    }, response);
  },
  select: function(event,ui) {
    $("#uid").val(ui.item.id)
  },
  search: function() {
    var term = ( this.value );
    if ( term.length < 2 ) {
      return false;
    }
  }
});

查看更多：http://jqueryui.com/autocomplete/#multiple-remote

通过这种方式，您可以创建自己的 GET 请求，并将多个术语传递给您的 CF 脚本。如您所见，您可以从页面的其他部分收集设置或值。

希望对您有所帮助。