带有复选框和 Jquery 的 Coldfusion 搜索结果过滤器

Question

我正在开发一个就业网站。在搜索结果页面上，我将 url 变量传递给 Coldfusion 组件，该组件以 JSON 格式返回结果，然后使用把手模板输出（感谢 Raymond Camden 的脚本，可以找到 here）。

我想使用基于我数据库中的各种类别的复选框来过滤结果，网上有一个 PHP 教程，它完全符合我希望我的搜索页面做的事情，可以在 here 找到>

这是我的脚本和车把模板：

车把模板：

 <script id="results-template" type="text/x-handlebars-template">
    {{#each records}}

        <div class="search-results">
             <h3 class="text-left">{{job_title}}</h3>
            <ul class="list-group">
                <li class="list-group-item">DATE POSTED: {{job_date_post}}</li>
                <li class="list-group-item">JOB REF NO: {{job_ref_no}}</li>
                <li class="list-group-item">INDUSTRY: {{job_industry}}</li>
                <li class="list-group-item">KEYWORDS: {{job_keywords}}</li>
                <li class="list-group-item">JOB TYPE: {{job_type_id}}</li>
            </ul>
        </div>


    {{/each}}
</script>

这里是ajax调用：

 <script>
 function cfQueryNormalize(d) {
    var result = [];
    for(var i=0, len=d.DATA.length; i<len;i++) {
        var item = {};
        for(var k=0,innerlen=d.COLUMNS.length; k<innerlen; k++ ) {
            item[d.COLUMNS[k].toLowerCase()] = d.DATA[i][k];
        }
        result.push(item);
    }
    return result;
} 


$(document).ready(function() {

    //Get the contents from the script block 
    var source = document.querySelector("#results-template").innerHTML;
    //Compile that baby into a template
    template = Handlebars.compile(source);



    $.get("cfc/search-results.cfc?method=getresults&returnformat=json", {city:"<cfoutput>#url.city#</cfoutput>", Keywords:"<cfoutput>#url.keywords#</cfoutput>"}, function(res,code) {
        var d = cfQueryNormalize(res);
        var html = template({records:d});
        $("#results").html(html);
    }, "json");

    });

</script>

这是 Coldfusion 组件：

 <cffunction access="remote" name="getresults" output="false" >

 <cfargument name="city" displayName="city" type="string" hint="Displays the Search Results"  />
 <cfargument name="keywords" displayName="keywords" type="string" hint="Displays the Search Results"  />
 <cfargument name="salary_id" displayName="salary_id" type="string" hint="Displays the Salary Results" />
 <cfargument name="job_type_id" displayname="job_type_id" type="string" required="no">
 <cfargument name="job_industry" displayname="job_industry" type="string" required="no">

 <cfquery name="getresults" datasource="#datasource#" username="#username#" password="#password#">
  SELECT jobs.job_id, 
    jobs.job_title, 
    jobs.job_type_id,
    jobs.job_salary_id, 
    jobs.job_salary, 
    jobs.loc_country, 
    jobs.loc_region, 
    jobs.loc_city, 
    jobs.job_date_post, 
    jobs.job_ref_no, 
    jobs.job_detail_organization, 
    jobs.job_detail_requirements, 
    jobs.job_detail_description, 
    jobs.recruiter_id, 
    jobs.job_industry, 
    jobs.job_sub_industry, 
    jobs.job_keywords, 
    jobs.job_active, 
    jobs.job_applications, 
    jobs.job_views
 FROM jobs
 WHERE <cfif #Arguments.city# GT''>jobs.loc_city = #Arguments.city# AND</cfif> jobs.job_keywords LIKE '%#Arguments.keywords#%' <cfif Isdefined ('Arguments.salary_id')>AND jobs.job_salary_id = #Arguments.salary_id#</cfif>
 </cfquery>

 <cfreturn getresults> 
 </cffunction>

我的复选框将基于：

1) 薪水，他们将有一系列年薪金额

2) 工作类型 - 永久、兼职、临时等

3) 工作行业。

结果在数据库中都有对应的复选框字段。

我如何能够单击一个或多个复选框并根据我所做的选择优化 Coldfusion 组件中的结果？

任何帮助将不胜感激。

托马拉克：

这是我拥有的一组复选框的代码：

 <cfloop query="getstypes">
 <li class="list-group-item">
     <label><input class="job_salary#getstypes.job_salary_id#" type="checkbox" name="salary_id" id="salary_id" value="#getstypes.job_salary_id#"> #getcur.currency_symbol##numberformat(getstypes.job_salary_from, ",")#to #getcur.currency_symbol##numberformat(getstypes.job_salary_to, ",")#<span>(#getscount.recordcount#)</span></label>
     </li>

 </cfloop>

请问这是否正确？

Answer 1

首先，请修复您的 CFC。

• 使用类型化参数（即，当它们实际上是数字时，不要使用string）
• 添加参数完整性检查（范围/格式检查）
• 为可选参数提供有用的默认值（事实上，你并不真的需要可选参数）
• 使用<cfqueryparam> 代替变量插值到SQL 文本中
• 在<cffunction> 中定义returnformat="json"

那么，在 JavaScript 中：

// collect other API methods here, if there are any
var API = {
    getresults: function(params) {
        return $.get("cfc/search-results.cfc?method=getresults", params)
        .then(cfQueryNormalize)
        .fail(function () {
            console.error("getresults failed:" , arguments);
        });
    }
};

$(function() {
    var resultsTemplate = Handlebars.compile($("#results-template").text());

    // on change of any of these input elements...
    $("#city,#keywords,#salary_id,#job_type_id,#job_industry").change(function () {
        // ...call the API with all values and render the result
        API.getresults({
            city: $("#city").val(), 
            keywords: $("#keywords").val(), 
            salary_id: $("#salary_id").val(),
            job_type_id: $("#job_type_id").val(),
            job_industry: $("#job_industry").val()
        })
        .then(renderWith(resultsTemplate))
        .done(function (html) {
            $("#result").html(html);
        });
    });

    // trigger change event once to force initial loading
    $("#city").trigger("change");
});

// helper functions ------------------------------------------------
function cfQueryNormalize(queryObject) {
    return queryObject.DATA.map(function (row) {
        var item = {};
        queryObject.COLUMNS.forEach(function (col, c) {
            item[col.toLowerCase()] = row[c];
        });
        return item;
    });
} 

function renderWith(template) {
    return function (data) {
        return template(data);
    };
}

在您的 HTML 源代码中创建适当的表单域。

不要将#url.city# 写入您的JS 源代码，而是将其写入city 表单字段的value 属性。 （如果值不是用户可更改的，则创建隐藏的表单字段。）

推荐阅读理解.then()、.done()和.fail()我在上面的代码中使用的是：jQuery Deferred objects和jQuery ajax。