js自動補全執行個體

標籤：des   style   blog   io   ar   color   os   sp   for   

var oInputField ,oPopDiv , oColorsUl,aColors;  //初始設定變數 function initVars(modelId,divId,ulId){    oInputField = document.getElementById(modelId);    oPopDiv = document.getElementById(divId);    oColorsUl = document.getElementById(ulId);}//查機種、料號 自動補全function findModel(div_id,ul_id,model_id,form_id,p_cbo_id){     var keyCode = event.keyCode;     var arrayStr =‘‘;    initVars(model_id,div_id,ul_id);    var aResult = new Array();  //用於存放匹配結果    var params = document.getElementById(model_id).value; //序列化表格式資料"myForm1"為表格的id    if((keyCode >= 65 && keyCode <= 90) || (keyCode >= 48 && keyCode <= 57) || keyCode == 8 || keyCode == 46){//要過濾的鍵位 字母、數字、刪除鍵        if(oInputField.value.length >= 2){//超過兩位開始查        $.ajax({            type:‘post‘,            data:{‘modelName‘:params},            dataType:‘json‘,            url:‘queryPart.action‘,            success:function(data) {                   if(data == "error" || data == null || data == ""){                    clearModel();                    return;                }                document.getElementById(div_id).style.display = ‘block‘;                $.each(data,function(index,element){                     arrayStr +=element.model_name+‘,‘+element.part_no+‘,‘+element.route_id+‘$‘;                });                aResult = arrayStr.split("$");                setModel(model_id,div_id,aResult,p_cbo_id);            }         });        }else{            clearModel();//無輸入時清除提示框        }    } }//清除提示內容function clearModel(){    for(var i = oColorsUl.childNodes.length - 1 ; i >= 0 ; i-- )        oColorsUl.removeChild(oColorsUl.childNodes[i]);    oPopDiv.className = "hide";}//設定自動補全資料  function setModel(modelId,divId,the_models,p_cbo_id){    //顯示提示框、傳入的參數即為匹配出來的結果組成的數組    clearModel();//每輸入一個字母就先清除原先的提示、再繼續    oPopDiv.className = "show";    var oLi;         for(var i = 0 ; i < the_models.length ; i++ ){        //將匹配的提示結果逐一顯示給使用者        oLi = document.createElement("li");        oColorsUl.appendChild(oLi);        oLi.appendChild(document.createTextNode(the_models[i]));                oLi.onmouseover = function(){            this.className = "mouseOver" ;  //滑鼠指標經過時高亮        }        oLi.onmouseout = function(){            this.className = "mouseOut" ;   //滑鼠指標離開時恢複原樣        }        oLi.onclick = function(){            //使用者單擊某個匹配項時、設定輸入框為該項的值            oInputField.value = this.firstChild.nodeValue;            clearModel();//同時清除提示框            document.getElementById(divId).style.display = ‘none‘;            getProcessNames(modelId,p_cbo_id);        }    }}

JSP代碼：

<s:textfield title="請輸入機種關鍵字，至少兩位"  name="modelName" size="30" id="model_id" onkeyup="findModel(‘popup_wip‘,‘model_colors_ul_wip‘,this.id,‘queryWIPForm‘,‘p_cbo_id_wip‘);" cssClass="required"></s:textfield><div id="popup_wip">      <ul id="model_colors_ul_wip"></ul></div>

CSS樣式代碼

<style>        <!--        #popup_wip{            /*提示框div塊的樣式*/            position: absolute; width: 200px;            color: #004a7e; font-size: 12px;            font-family: Arial,Helvetica,sans-serif;            left: 43px; top: 28px;            background-color: #E6EAE9;            overflow:auto;            height: 50px;            display: none;        }        #popup_wip.show{            /*顯示提示框的邊框*/            border: 1px solid #004a7e;        }        #popup_wip.hide{            /*隱藏提示框的邊框*/            border: none;        }        /*提示框的樣式風格*/        ul{            list-style: none;            margin: 0px; padding: 0px;        }        li.mouseOver{            background-color: #004a7e;            color: #FFFFFF;        }          li.mouseOut{            background-color: #FFFFFF;            color: #004a7e;        }        -->    </style>

Action代碼：

private List<Map<String,Object>> listParts;
public void queryPart(){        IQueryDAO query = new IQueryDAOImpl();        listPartMaps = query.queryPart(modelName.toUpperCase());        JSONArray jsonArray = JSONArray.fromObject(listPartMaps);        try {            ServletActionContext.getResponse().getWriter().print(jsonArray);        } catch (IOException e) {            e.printStackTrace();        }    }

DAO代碼：

    public List<Map<String,Object>> queryPart(String modelName) {        db = new DBManager();        String sql ="select part_id,model_name,part_no,route_id from sajet.sys_part where upper(model_name) like upper(?) and enabled =‘Y‘  ORDER BY MODEL_NAME";        List<Map<String,Object>> listPart = new ArrayList<Map<String,Object>>();        try {            connection = db.GetOraConnection();            pstmt = connection.prepareStatement(sql);            pstmt.setString(1, modelName+"%");            rs = pstmt.executeQuery();            while(rs.next()){                Map<String,Object> map = new HashMap<String,Object>();                map.put("part_id", rs.getInt("part_id"));                map.put("model_name", rs.getString("model_name"));                map.put("route_id", rs.getInt("route_id"));                map.put("part_no", rs.getString("part_no"));                listPart.add(map);            }        } catch (SQLException e) {            log.error("查詢機種時出錯："+e.getMessage());            e.printStackTrace();        }finally{            db.closeConnection(connection, rs, pstmt);        }        return listPart;    }

 

js自動補全執行個體