博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js自动补全实例
阅读量:4312 次
发布时间:2019-06-06

本文共 3977 字,大约阅读时间需要 13 分钟。

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代码:

CSS样式代码

Action代码:

private List
> 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
> 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
> listPart = new ArrayList
>(); try { connection = db.GetOraConnection(); pstmt = connection.prepareStatement(sql); pstmt.setString(1, modelName+"%"); rs = pstmt.executeQuery(); while(rs.next()){ Map
map = new HashMap
(); 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; }

 

转载于:https://www.cnblogs.com/azhqiang/p/4125548.html

你可能感兴趣的文章
第三章 熟悉常用的HDFS操作
查看>>
filter:expression(document.execCommand("BackgroundImageCache",false,true) 转
查看>>
Java - 30 Java 网络编程
查看>>
shiro中的filterChainDefinitions
查看>>
瑞柏匡丞教你如何和程序员一起愉快的玩耍
查看>>
【单调队列】Vijos P1771 瑞士轮 (NOIP2011普及组第三题)
查看>>
【模拟】NEERC15 E Easy Problemset (2015-2016 ACM-ICPC)(Codeforces GYM 100851)
查看>>
JavaBean and PreparedStatement Usage
查看>>
经典冒泡排序
查看>>
HDU1312:Red and Black(DFS)
查看>>
es6 async与await实战
查看>>
北京行——xml解析之SAX
查看>>
Oracle_创建和管理表
查看>>
Retry Pattern
查看>>
字符串反转---指针
查看>>
SyntaxError: keyword can't be an expression解决方法
查看>>
高级特性(2)-迭代
查看>>
Android上PhoneGap打包本地网站和在线网站
查看>>
HDU-2052(字符画图问题)
查看>>
jython学习笔记3
查看>>