jquery+ajax列表过滤以及高亮的实现

1，页面jsp

<div class="middle">
    <h2>货运状态</h2>
    <div class="search">
        <label id="">托运编号：</label>
        <input type="text" name="searchgoodsid"/>
    </div>
    <div>
        <table >
            <thead>
                <tr>
                    <th>托运编号</th>
                    <th>物品名称</th>
                    <th>托运终点</th>
                    <th>托运路线</th>
                    <th>托运车次</th>
                    <th>当前状态</th>
                    <th>备注</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="10"></td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

2，jquery+ajax

<script type="text/javascript">
    $(function(){
        init();

        $("input[name='searchgoodsid']").keyup(function(e){
            if($(this).val()!=null && $.trim($(this).val())!=""){
                var orderid = $.trim($(this).val()).toString();
                if(getCharAt("'",orderid) != -1){
                    orderid = orderid.replace(/'/, "''");//这个地方我把单引号(')转换成('')是因为单引号在数据库查询中如果会出现冲突
                }
                $.ajax({
                    url:"gettransportstate.do",
                    type:"POST",
                    data:{orderformid : orderid},
                    dataType:"html",
                    beforeSend: function(){
                        $("tbody tr.matter").remove();
                        $(this).attr("value", "\u67e5询中...");
                    },
                    complete:function(){
                        $(this).attr("value", "\u786e定");
                    },
                    success:function(data){
                        if(data==null || data==""){
                            $(".matter").hide();
                            alert("\u8f93入编号无法查询！");
                        }else{
                            var reg = new RegExp(orderid, "ig");//正则表达式中/i是忽略大小写，/g是全文匹配。
                            data = data.toString().replace(reg, "<span style='COLOR:#00F;font-weight:bold'>"+orderid.toUpperCase()+"</span>");//高亮上色
                            $("tbody").html(data);
                            $(".matter").show();
                        }
                    },
                    error:function(){
                        $(".matter").hide();
                        alert("\u8f93入编号无法查询！!");
                    }
                });
            }else{
                init();
            }
        })
                
        function init(){//初始化表格数据
            var htmlData = "<c:forEach var='transportstate' items='${transportstate}'>";
            htmlData += "<tr class='element'><td id='orderformid'>${transportstate.orderformid}</td>";
            htmlData += "<td id='goodsname'>${transportstate.goods.goodsname}</td>";
            htmlData += "<td id='receiveraddress'>${transportstate.receiveraddress}</td>";
            htmlData += "<td id='path'>${transportstate.path.description}</td>";
            htmlData += "<td id='trainnumber'>0</td>";
            htmlData += "<td id='time'>${transportstate.goods.nowstate.nowstatename}</td>";
            htmlData += "<td id='description'>0</td>";
            htmlData += "</tr></c:forEach>";
            $("tbody").html(htmlData);
        }

        function getCharAt(val,str){//获取数组中对应数字的索引
            for (var i = 0; i < str.length; i++) {
                if (val == str.charAt(i))
                    return i;
            }
            return -1;
        };
    })
</script>

3，后台数据返回

public ActionForward getOneTransportStateListAction(ActionMapping mapping,
            ActionForm form, HttpServletRequest request,
            HttpServletResponse response) throws Exception {
        try {
            String orderformid = request.getParameter("orderformid");
            String hqlStr = "from " + Orderform.class.getName() + " entity where entity.orderformid like '%" + orderformid + "%'";
            List orderforms = ofdi.getObjectsByCreateQuery(hqlStr);

            response.setContentType("text/html;charset=utf-8");
            PrintWriter out = response.getWriter();

            if (orderforms != null && orderforms.size() > 0) {
                for (int i = 0; i < orderforms.size(); i++) {
                    Orderform of = (Orderform) orderforms.get(i);
                    String outputHtml = "<tr class='element'>";
                    outputHtml += "<td id='orderformid'>" + of.getOrderformid() + "</td>";
                    outputHtml += "<td id='goodsname'>" + of.getGoods().getGoodsname() + "</td>";
                    outputHtml += "<td id='receiveraddress'>" + of.getReceiveraddress() + "</td>";
                    outputHtml += "<td id='path'>" + of.getPath().getDescription() + "</td>";
                    outputHtml += "<td id='trainnumber'>" + 1 + "</td>";
                    outputHtml += "<td id='time'>" + of.getTime() + "</td>";
                    outputHtml += "<td id='description'>" + of.getDescription() + "</td>";
                    out.println(outputHtml);
                }
            } else {
                out.println();
            }
            request.setAttribute("transportstate", orderforms);
            return null;
        } catch (Exception ex) {
            ex.printStackTrace();
            return mapping.getInputForward();
        }
}

4，struts配置文件struts-config.xml

<!--货运状态action开始-->
        <!--①货运状态列表显示action-->
        <action path="/transportstate" type="cn.osunda.logistics.action.transportstate.TransportStateAction"
            parameter="getTransportStateListAction" input="/stationmanager/index.jsp">
            <forward name="transportstate" path="/transportstate/transportstate.jsp"></forward>
        </action>
        <!--②货运状态查询action-->
        <action path="/gettransportstate" type="cn.osunda.logistics.action.transportstate.TransportStateAction"
            parameter="getOneTransportStateListAction" scope="request">
        </action>
 <!--货运状态action结束-->

5，页面效果图