将额外变量传递给 CFC 以用于 Jqueryui 自动完成的 DB 过滤器
Pass extra variable to CFC for DB filter for Jqueryui autocomplete
我有一个 jQueryUI 自动完成功能,但我意识到数据集有点太大,如果不使用额外的过滤器就无法浏览。我正在寻找一系列 'Products',但需要通过过滤 'Product Family'.
进一步削减列表
我使用 ColdFusion 作为后端,因此我将查找值传递给查询 Oracle 数据库的 CFC。
我想到的(可能是更好的解决方案,我只是没想到)是 select 和 'Product Families'。我想将 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
,但我不知道如何将该值传递给自动完成功能。
我调整了"source"阅读,
../../cfc/mwwf_software.cfc?method=lookup_product&q_param=" + q_param
但是,在查看 firebug 时,我可以看到作为空字符串传递的变量破坏了 cfc。
有没有更好的方法来处理这个问题,或者有没有办法将更新的 q_param 拉入自动完成小部件以传递给 cfc?
我建议使用 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 脚本。如您所见,您可以从页面的其他部分收集设置或值。
希望对您有所帮助。
我有一个 jQueryUI 自动完成功能,但我意识到数据集有点太大,如果不使用额外的过滤器就无法浏览。我正在寻找一系列 'Products',但需要通过过滤 'Product Family'.
进一步削减列表我使用 ColdFusion 作为后端,因此我将查找值传递给查询 Oracle 数据库的 CFC。
我想到的(可能是更好的解决方案,我只是没想到)是 select 和 'Product Families'。我想将 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
,但我不知道如何将该值传递给自动完成功能。
我调整了"source"阅读,
../../cfc/mwwf_software.cfc?method=lookup_product&q_param=" + q_param
但是,在查看 firebug 时,我可以看到作为空字符串传递的变量破坏了 cfc。
有没有更好的方法来处理这个问题,或者有没有办法将更新的 q_param 拉入自动完成小部件以传递给 cfc?
我建议使用 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 脚本。如您所见,您可以从页面的其他部分收集设置或值。
希望对您有所帮助。