Question

我正在使用Coldfusion 9和Sql Server 2008 r2。我正在尝试使用显示结果的实时搜索。

原帖是：http://www.raymondcamden.com/index.cfm/2011/2/1/Using-jQuery-to-search-against-different-types-of-content

我想为此添加一个表，所以我可以将其格式化。任何帮助都会很棒。

这是Search.cfm

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
<script>
$(document).ready(function() {

//http://stackoverflow.com/questions/217957/how-to-print-debug-messages-in-the-google-chrome-javascript-console/2757552#2757552
if (!window.console) console = {};
console.log = console.log || function(){};
console.dir = console.dir || function(){};


//listen for keyup on the field
$("#searchField").keyup(function() {
    //get and trim the value
    var field = $(this).val();
    field = $.trim(field)

    //if blank, nuke results and leave early
    if(field == "") {
        $("#results").html("");
        return;
    }

    console.log("searching for "+field);
    $.getJSON("test.cfc?returnformat=json&method=search", {"search":field}, function(res,code) {
        var s = "";
        s += "<h2>Results</h2>";
        for(var i=0; i<res.fd_table.length; i++) {
            s += "<p><b>uid:"+res.fd_table[i].fd_uid+"</b><br/>Device: "+res.fd_table[i].fd_dev + "<br/>";

        }

        $("#results").html(s);
    });
});
 })

<form>
Search: <input type="text" name="search" id="searchField">
</form>

<div id="results"></div>

演示来自原始帖子http://www.coldfusionjedi.com/demos/feb12011/test.cfm

这是我想要实现的最终结果。

Answer 1

您可能想要了解如何使用JQuery动态构建表。你提出这个问题的方式听起来很像“请完成我的家庭作业”，然后在一个合法的项目上寻求帮助。

如果您查看代码中的$ .getJSON（）函数，使用变量 s 的方式将为您提供有关如何实现此功能的可靠线索。对于具有X个包含数据的td单元的行的行，表是X个tr标签。从那里，只需循环遍历tr标签的查询结果行和td标签的每列。

不打算为你写出代码，但我已经给你足够的搜索JQuery文档，指出你正确的方向。

Answer 2

这是结果，我能够制作一个简单的表格。谢谢大家的建议。

console.log("searching for "+field);
    $.getJSON("test.cfc?returnformat=json&method=search", {"search":field}, function(res,code) {
        var s = "<table name='table1' border='1'><tr><th>Uid</th><th>Device</th><th>Region</th><th>Problem</th><th>Description</th><th>Resolution</th><th>Agent</th></tr>";

        s += "";
        for(var i=0; i<res.fd_table.length; i++) {
            s += "<tr><td width='142' >"+res.fd_table[i].fd_uid+"</td><td>"+res.fd_table[i].fd_dev + 
            "</td><td>"+res.fd_table[i].fd_reg +
            "</td><td> "+res.fd_table[i].fd_prob + 
            "</td><td> "+res.fd_table[i].fd_pdes + 
            "</td><td>"+res.fd_table[i].fd_res + 
            "</td><td> "+res.fd_table[i].fd_agent + 
            "</td>";
           s += "</tr>";
        }
         s += "</table>";
        $("#results").html(s);
    });
   });
 })

Coldfusion和Jquery结果表格式

2 个答案: