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自动补全实例的更多相关文章

  1. js自动补全空白列(即缺少td的列)

    //自动补全空白列 var rows = document.getElementById("gridTable").rows; //行对象 var allcells = rows[ ...

  2. js自动补全

    <!doctype html> <html> <style> body { margin-left: 0px; margin-top: 0px; margin-ri ...

  3. 原创js自动补全---auotocomplete

    if ($("input.autocomplete_input").length > 0) { $("input.autocomplete_input") ...

  4. Visual Studio Code使用typings拓展自动补全功能

    转自:http://blog.csdn.net/liyijun4114/article/details/51658087 参考来源: 官方介绍: https://code.visualstudio.c ...

  5. js邮箱自动补全

    邮箱自动补全js和jQuery html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  6. jquery input 搜索自动补全、typeahead.js

    最近做个一个功能需要用到自动补全,然后在网上找了很久,踩了各种的坑 最后用typeahead.js这个插件,经过自己的测试完美实现 使用方法:在页面中引入jquery.jquery.typeahead ...

  7. jQuery搜索框自动补全功能插件实现-autocomplete.js

    最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单 ...

  8. jQuery AutoComplete 自动补全

    jQuery.AutoComplete是一个基于jQuery的自动补全插件.借助于jQuery优秀的跨浏览器特性,可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器. 特 ...

  9. jquery.autocomplete自动补全功能

    项目实例: 一:js //SupplierAutoComplete.js $().ready(function () { $("#txtSupplier").autocomplet ...

随机推荐

  1. Centos 常用命令[持续积累中...]

    CentOS常用到的查看系统命令 uname -a cat /etc/issue /sbin/ifconfig # 查看内核/操作系统/CPU信息 head -n 1 /etc/issue # 查看操 ...

  2. DotNetOpenAuth实践之搭建验证服务器

    系列目录: DotNetOpenAuth实践系列(源码在这里) DotNetOpenAuth是OAuth2的.net版本,利用DotNetOpenAuth我们可以轻松的搭建OAuth2验证服务器,不废 ...

  3. Python全栈开发之14、Javascript

    一.简介 前面我们学习了html和css,但是我们写的网页不能动起来,如果我们需要网页出现各种效果,那么我们就要学习一门新的语言了,那就是JavaScript,JavaScript是世界上最流行的脚本 ...

  4. loadrunner添加变量检查点

    LoadRunner设置登陆检查点 login() { lr_think_time(); web_url("passport2", "URL=http://test232 ...

  5. Gitlab服务器维护

    一. 内容 Gitlab服务器的更新 Gitlab服务器备份与恢复 导入Git仓库 二. Gitlab服务器的更新 1. 使用SSH登陆Gitlab服务器 2. 停止后端的unicorn服务器 [ro ...

  6. ICMP隧道工具ptunnel

    ICMP隧道工具ptunnel   在一些网络环境中,如果不经过认证,TCP和UDP数据包都会被拦截.如果用户可以ping通远程计算机,就可以尝试建立ICMP隧道,将TCP数据通过该隧道发送,实现不受 ...

  7. iOS 11开发教程(八)定制iOS11应用程序图标

    iOS 11开发教程(八)定制iOS11应用程序图标 在图1.9中可以看到应用程序的图标是网状白色图像,它是iOS模拟器上的应用程序默认的图标.这个图标是可以进行改变的.以下就来实现在iOS模拟器上将 ...

  8. django 启动nginx的时候,报端口被占用的问题

    Nginx [emerg] listen() to 0.0.0.0:80, backlog 511 failed (98: Address already in use) Nginx更新后经常遇到这样 ...

  9. 7.4 (java学习笔记)网络编程之TCP

    一.TCP 1.1 TCP(Transmission Control Protocol 传输控制协议),是一种面向连接的,安全的传输协议,但效率相比于UDP而言比较低. TCP传输时需要确保先建立连接 ...

  10. 【洛谷】1852:[国家集训队]跳跳棋【LCA】【倍增?】

    P1852 [国家集训队]跳跳棋 题目背景 原<奇怪的字符串>请前往 P2543 题目描述 跳跳棋是在一条数轴上进行的.棋子只能摆在整点上.每个点不能摆超过一个棋子. 我们用跳跳棋来做一个 ...