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 =http://www.mamicode.com/="error" || data =http://www.mamicode.com/= null || data =http://www.mamicode.com/=""){                    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 = http://www.mamicode.com/this.firstChild.nodeValue;            clearModel();//同时清除提示框            document.getElementById(divId).style.display = ‘none‘;            getProcessNames(modelId,p_cbo_id);        }    }}

<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>

<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>

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();        }    }

    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;    }