js自动补全实例

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