码迷,mamicode.com
首页 > Web开发 > 详细

js自动补全实例

时间:2014-11-27 09:11:13      阅读:206      评论:0      收藏:0      [点我收藏+]

标签: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自动补全实例

标签:des   style   blog   io   ar   color   os   sp   for   

原文地址:http://www.cnblogs.com/azhqiang/p/4125548.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!