Jquery+ajax list filtering and the implementation of highlighting

1, page JSP

<div class= "Middle" >
    
 
 

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 (/'/, ' "");//This place I convert single quotes (') to (') because single quotes in the database
                    If there is a conflict in the query} $.ajax ({url: "Gettransportstate.do", Type: "POST", Data:{orderformid:orderid}, DataType: "HTML", be
                        Foresend:function () {$ ("tbody tr.matter"). Remove ();
                    $ (this). attr ("value", "\u67e5 in consultation ...");
                    }, Complete:function () {$ (this). attr ("value", "\u786e set");
                   }, Success:function (data) {     if (Data==null | | data== "") {$ (". Matter"). Hide (); Alert ("\u8f93 into number cannot be queried.")
                        ");
                            }else{var reg = new RegExp (OrderID, "IG");///I is ignoring case in regular expressions,/g is full text matching. data = Data.tostring (). Replace (Reg, "<span style= ' COLOR: #00F; Font-weight:bold ' >" +orderid.touppercase () + "<
                            /SPAN> ");//Highlight Color $ (" tbody "). HTML (data);
                        $ (". Matter"). Show ();
                        }, Error:function () {$ (". Matter"). Hide ();
                    Alert ("\u8f93 into number cannot be queried.!");
            }
                });
            }else{init (); function init () {///Initialize table data var htmldata = ' <c:foreach var= ' transportst
            Ate ' 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);
                The function Getcharat (VAL,STR) {//Gets the index for the corresponding number in the array for (var i = 0; i < str.length; i++) {
            if (val = = Str.charat (i)) return i;
        } return-1;
    }; }) </script>
3, background data return


Public Actionforward getonetransportstatelistaction (actionmapping mapping, actionform form, httpservletrequest Request, HttpServletResponse response) throws Exception {try {String orderformid = requ
            Est.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 configuration file Struts-config.xml


<!--freight status action start-->
        <!--① Freight status list displays action-->
        <action path= "/transportstate" Cn.osunda.logistics.action.transportstate.TransportStateAction "
            parameter=" Gettransportstatelistaction " input= "/stationmanager/index.jsp" >
            <forward name= "transportstate" path= "/transportstate/" transportstate.jsp "></forward>
        </action>
        <!--② Freight status inquiry action-->
        <action path= "/gettransportstate" type= "cn.osunda.logistics.action.transportstate.TransportStateAction"
            parameter= " Getonetransportstatelistaction "scope=" request ">
        </action>
 <!--freight status action end-->
5, Page Effect chart