Question

我有一个jQueryUI自动完成功能，但是意识到没有额外的过滤器，数据集太大了，无法浏览。我正在寻找一系列“产品”，但需要通过过滤“产品系列”来进一步削减列表。

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

我想出的（可能是一个更好的解决方案，我只是没有想到）是选择“产品系列”。我想将product_family_id用作查询中的过滤器，将该product_family_id传递给带有搜索词的CFC。这是我到目前为止的内容：

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

但是，在看萤火虫时，我可以看到该变量作为打破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脚本。如您所见，您可以从页面的其他部分收集设置或值。

希望有帮助。

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

1 个答案: