359863987
- 浏览: 33748 次
- 性别:
- 来自: 上海
-
自动提示js代码示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>autoComplete</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.autoComplete {margin:8px;position:relative;float:left;}
.autoComplete input {width:200px;height:25px;margin:0;padding:0;line-height:25px;}
.autoComplete ul {z-index:-12;padding:0px;margin:0px;border:1px #333 solid;width:200px;background:white;display:none;position:absolute;left:0;top:28px;*margin-left:9px;*margin-top:2px;margin-top:1px\0;}
.autoComplete li {list-style:none;}
.autoComplete li a {display:block;color:#000;text-decoration:none;padding:1px 0 1px 5px;_width:97%;}
.autoComplete li a:hover {color:#000;background:#ccc;border:none;}
</style>
<script type="text/javascript">
//<![CDATA[
var getElementsByClassName = function (searchClass, node, tag) {/* 兼容各浏览器的选择class的方法；(写法参考了博客园：http://www.cnblogs.com/rubylouvre/archive/2009/07/24/1529640.html，想了解更多请看这个地址) */
node = node || document, tag = tag ? tag.toUpperCase() : "*";
if(document.getElementsByClassName){/* 支持getElementsByClassName的浏览器 */
var temp = node.getElementsByClassName(searchClass);
if(tag=="*"){
return temp;
} else {
var ret = new Array();
for(var i=0; i<temp.length; i++)
if(temp[i].nodeName==tag)
ret.push(temp[i]);
return ret;
}
}else{/* 不支持getElementsByClassName的浏览器 */
var classes = searchClass.split(" "),
elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),
patterns = [], returnElements = [], current, match;
var i = classes.length;
while(--i >= 0)
patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));
var j = elements.length;
while(--j >= 0){
current = elements[j], match = false;
for(var k=0, kl=patterns.length; k<kl; k++){
match = patterns[k].test(current.className);
if(!match) break;
}
if(match) returnElements.push(current);
}
return returnElements;
}
};
var addEvent=(function(){/* 用此函数添加事件防止事件覆盖 */
if(document.addEventListener){
return function(type, fn){ this.addEventListener(type, fn, false); };
}else if(document.attachEvent){
return function(type,fn){
this.attachEvent('on'+type, function () {
return fn.call(this, window.event);/* 兼容IE */
});
};
}
})();
;(function(window){
/* 插件开始 */
var autoComplete=function(o){
var handler=(function(){
var handler=function(e,o){ return new handler.prototype.init(e,o); };/* 为每个选择的dom都创建一个相对应的对象，这样选择多个dom时可以很方便地使用 */
handler.prototype={
e:null, o:null, timer:null, show:0, input:null, popup:null,
init:function(e,o){/* 设置初始对象 */
this.e=e, this.o=o,
this.input=this.e.getElementsByTagName(this.o.input)[0],
this.popup=this.e.getElementsByTagName(this.o.popup)[0],
this.initEvent();/* 初始化各种事件 */
},
match:function(quickExpr,value,source){/* 生成提示 */
var li = null;
for(var i in source){
if( value.length>0 && quickExpr.exec(source[i])!=null ){
li = document.createElement('li');
li.innerHTML = '<a href="javascript:;">'+source[i]+'</a>';
this.popup.appendChild(li);
}
}
if(this.popup.getElementsByTagName('a').length)
this.popup.style.display='block';
else
this.popup.style.display='none';
},
ajax:function(type,url,quickExpr,search){/* ajax请求远程数据 */
var xhr = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
xhr.open(type,url,true);/* 同异步在此修改 */
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var that=this;
xhr.onreadystatechange = function(){
if(xhr.readyState==4) {
if(xhr.status==200) {
var data = eval(xhr.responseText);
that.match(quickExpr,search,data);/* 相同于成功的回调函数 */
}else{
alert("请求页面异常!");/* 请求失败 */
}
}
};
xhr.send(null);
},
fetch:function(ajax,search,quickExpr){
var that=this;
this.ajax(ajax.type,ajax.url+search,quickExpr,search);
},
initEvent:function(){/* 各事件的集合 */
var that=this;
this.input.onfocus = function(){
if(this.inputValue) this.value = this.inputValue;
var value=this.value, quickExpr=RegExp('^'+value,'i'), self=this;
var els = that.popup.getElementsByTagName('a');
if(els.length>0) that.popup.style.display = 'block';
that.timer=setInterval(function(){
if(value!=self.value){/* 判断输入内容是否改变，兼容中文 */
value=self.value;
that.popup.innerHTML='';
if(value!=''){
quickExpr=RegExp('^'+value);
if(that.o.source) that.match(quickExpr,value,that.o.source);
else if(that.o.ajax) that.fetch(that.o.ajax,value,quickExpr);
}
}
},200);
};
this.input.onblur = function(){/* 输入框添加事件 */
if(this.value!=this.defaultValue) this.inputValue = this.value;
clearInterval(that.timer);
var current=-1;/* 记住当前有焦点的选项 */
var els = that.popup.getElementsByTagName('a');
var len = els.length-1;
var aClick = function(){
that.input.inputValue = this.firstChild.nodeValue;
that.popup.innerHTML='';
that.popup.style.display='none';
that.input.focus();
};
var aFocus = function(){
for(var i=len; i>=0; i--){
if(this.parentNode===that.popup.children[i]){
current = i;
break;
}
}
//that.input.value = this.firstChild.nodeValue;
for(var k in that.o.elemCSS.focus){
this.style[k] = that.o.elemCSS.focus[k];
}
};
var aBlur= function(){
for(var k in that.o.elemCSS.blur)
this.style[k] = that.o.elemCSS.blur[k];
};
var aKeydown = function(event){
event = event || window.event;/* 兼容IE */
if(current === len && event.keyCode===9){/* tab键时popup隐藏 */
that.popup.style.display = 'none';
}else if(event.keyCode==40){/* 处理上下方向键事件方便选择提示的选项 */
current++;
if(current<-1) current=len;
if(current>len){
current=-1;
that.input.focus();
}else{
that.popup.getElementsByTagName('a')[current].focus();
}
}else if(event.keyCode==38){
current--;
if(current==-1){
that.input.focus();
}else if(current<-1){
current = len;
that.popup.getElementsByTagName('a')[current].focus();
}else{
that.popup.getElementsByTagName('a')[current].focus();
}
}
};
for(var i=0; i<els.length; i++){/* 为每个选项添加事件 */
els[i].onclick = aClick;
els[i].onfocus = aFocus;
els[i].onblur = aBlur;
els[i].onkeydown = aKeydown;
}
};
this.input.onkeydown = function(event){
event = event || window.event;/* 兼容IE */
var els = that.popup.getElementsByTagName('a');
if(event.keyCode==40){
if(els[0]) els[0].focus();
}else if(event.keyCode==38){
if(els[els.length-1]) els[els.length-1].focus();
}else if(event.keyCode==9){
if(event.shiftKey==true) that.popup.style.display = 'none';
}
};
this.e.onmouseover = function(){ that.show=1; };
this.e.onmouseout = function(){ that.show=0; };
addEvent.call(document,'click',function(){
if(that.show==0){
that.popup.style.display='none';
}
});/* 处理提示框dom元素不支持onblur的情况 */
}
};
handler.prototype.init.prototype=handler.prototype;/* JQuery style，这样我们在处的时候就不用每个dom元素都用new来创建对象了 */
return handler;/* 把内部的处理函数传到外部 */
})();
if(this.length){/* 处理选择多个dom元素 */
for(var a=this.length-1; a>=0; a--){/* 调用方法为每个选择的dom生成一个处理对象，使它们不互相影响 */
handler(this[a],o);
}
}else{/* 处理选择一个dom元素 */
handler(this,o);
}
return this;
};
return window.autoComplete = autoComplete;/* 暴露方法给全局对象 */
/* 插件结束 */
})(window);
/* 调用 */
addEvent.call(null,'load',function(){
autoComplete.call( getElementsByClassName('autoComplete'), {/* 使用call或apply调用此方法 */
source:['0123','023',123,1234,212,214,'033333','0352342',1987,17563,20932],/* 提示时在此数组中搜索 */
//ajax:{ type:'post',url:'./php/fetch.php?search=' },/* 如果使用ajax则远程返回的数据格式要与source相同 */
elemCSS:{ focus:{'color':'black','background':'#ccc'}, blur:{'color':'black','background':'transparent'} },/* 些对象中的key要js对象中的style属性支持 */
input:'input',/* 输入框使用input元素 */
popup:'ul'/* 提示框使用ul元素 */
});
});
//]]>
</script>
</head>
<body><!-- 这所以使用这么多的z-index是因为ie6和ie7的问题 -->
<div>
<div class="autoComplete" style="z-index:19"> <input value="input" /> <ul><li></li></ul> </div>
<!--<div class="autoComplete" style="z-index:18"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:17"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:16"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:15"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:14"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:13"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:12"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:11"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:10"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:9"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:8"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:7"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:6"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:5"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:4"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:3"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:2"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:1"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:0"> <input value="input" /> <ul><li></li></ul> </div> -->
<div style="clear:both;"></div>
</div>
<div style="border:3px red double;margin:15px;padding:5px;">
<h3 style="line-height:10px;">Tip:</h3>
<ul>
<li>输入0、1，2会得到提示。</li>
<li>用鼠标或上下键可以选择提示。</li>
<li>选择点击鼠标或点回车可以选择选项。</li>
<li>可以修改调用处，使各个输入框提示不同内容。</li>
</ul>
</div>
</body>
</html>
分享到：
发表评论
相关推荐
免费JAVA毕业设计 2024成品源码+论文+数据库+启动教程 启动教程：https://www.bilibili.com/video/BV1SzbFe7EGZ 项目讲解视频：https://www.bilibili.com/video/BV1Tb421n72S 二次开发教程：https://www.bilibili.com/video/BV18i421i7Dx
,IGBT结温估算 模型见另一个发布
"S7-200 PLC驱动的智能粮仓系统：带解释的接线图与组态画面原理详解",S7-200 mcgs基于plc的自动智能粮仓系统 带解释的梯形图接线图原理图图纸，io分配，组态画面 ,S7-200; PLC; 自动智能粮仓系统; 梯形图接线图; 原理图图纸; IO分配; 组态画面,基于S7-200 PLC的智能粮仓系统设计与实现
手机编程-1738391379497.jpg
,rk3399pro，rk3568，车载方案设计，4路AHD-1080P摄像头输入，防撞识别，助力车泥头车安全运输
,CAD、DXF导图，自动进行位置路径规划，源码可进行简单功能添加实现设备所需功能，已经在冲孔机，点胶机上应用，性价比超高。 打孔机实测一分钟1400个孔
,电机控制资料-- 注：本驱动器适合于直流有感无刷电机 功能特点 支持电压9V～36V，额定输出电流5A 支持电位器、开关、0~3.3V模拟信号范围、0 3.3 5 24V逻辑电平、PWM 频率 脉冲信号、RS485多种输入信号 支持占空比调速(调压)、速度闭环控制(稳速)、电流控制(稳流)多种调速方式 支持按键控制正反转速度，启停 特色功能 1. 霍尔自学习 电机的三相线和三霍尔信号线可不按顺序连接，驱动器可自动对电机霍尔顺序进行学习。 2. 稳速控制响应时间短 稳速控制时电机由正转2000RPM切为反转2000RPM，用时约1.0s，电机切过程平稳 3. 极低速稳速控制 电机进行极低速稳速控制，电机稳速控制均匀，无忽快忽慢现象。
《HFSS同轴馈电矩形微带天线的模型制作与参数优化：从结果中学习，使用HFSS软件包进行实践的详细教程》,HFSS同轴馈电矩形微带天线 天线模型，附带结果，可改参数，HFSS软件包 （有教程，具体到每一步，可以自己做出来） ,HFSS; 同轴馈电; 矩形微带天线; 可改参数; HFSS软件包; 附带结果; 教程,HFSS软件包：可改参微带天线模型附带结果教程
"基于第二篇文章求解方法，改进粒子群算法在微电网综合能源优化调度的应用与复现代码展示——第一篇模型的参考与实践",基于改进粒子群算法微电网综合能源优化调度 求解方法主要参考第二篇文章 模型参照第一篇 复现代码 ,核心关键词： 基于改进粒子群算法; 微电网综合能源优化调度; 求解方法; 第二篇文章; 模型; 第一篇文章; 复现代码;,基于第二篇求解方法的改进粒子群算法在微电网综合能源优化调度中的应用研究
基于Comsol模拟的三层顶板随机裂隙浆液扩散模型：考虑重力影响的瞬态扩散规律分析,Comsol模拟，考虑三层顶板包含随机裂隙的浆液扩散模型，考虑浆液重力的影响，模型采用的DFN插件建立随机裂隙，采用达西定律模块中的储水模型为控制方程，分析不同注浆压力条件下的浆液扩散规律，建立瞬态模型 ,Comsol模拟; 随机裂隙浆液扩散模型; 浆液重力影响; DFN插件; 达西定律模块储水模型; 注浆压力条件; 浆液扩散规律; 瞬态模型,Comsol浆液扩散模型：随机裂隙下考虑重力的瞬态扩散分析
"基于S7-200 PLC与MCGS组态的五层电梯控制系统设计与实现：带详细接线图、IO分配及组态画面解析",S7-200 PLC和MCGS组态5层电梯五层电梯PLC控制系统 带解释的梯形图接线图原理图图纸，io分配，组态画面 ,核心关键词：S7-200 PLC; MCGS组态; 五层电梯; PLC控制系统; 梯形图接线图; IO分配; 组态画面。,S7-200 PLC与MCGS组态五层电梯控制系统原理图及梯形图解析
一、项目简介 本项目是一套基于springBoot+mybatis+maven+vue夕阳红公寓管理系统 包含：项目源码、数据库脚本等，该项目附带全部源码可作为毕设使用。 项目都经过严格调试，eclipse或者idea 确保可以运行！ 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值 二、技术实现 jdk版本：1.8 及以上 ide工具：IDEA或者eclipse 数据库: mysql5.5及以上 后端：spring+springboot+mybatis+maven+mysql 前端: vue , css，js , elementui 三、系统功能 1、系统角色主要包括：管理员、用户 2、系统功能 主要功能包括： 用户登录注册 首页 个人中心 修改密码 个人信息 访客管理 公告信息管理 缴费管理 维修管理 行程轨迹管理 单页号类型管理 公告类型管理 维修类型管理 租客管理 轮播图管理 余额充值等功能 详见 https://flypeppa.blog.csdn.net/article/details/143117373
基于时空Transformer的端到端的视频注视目标检测.pdf
Online Retail.xlsx
,C#地磅称重无人值守管理软件。 软件实现功能： 1、身份证信息读取。 2、人证识别。 3、车牌识别（臻识摄像头、海康摄像头）。 4、LED显示屏文字输出。 5、称重仪数据。 6、二维码扫码。 7、语音播报。 8、红外对射功能。 9、道闸控制。
com.deepseek.chat.apk
基于pyqt5+OpenPose的太极拳姿态识别系统可视化界面python源码+数据集.zip，个人大三大作业设计项目、经导师指导并认可通过的高分设计项目，评审分99分，代码完整确保可以运行，小白也可以亲自搞定，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。 该压缩包是一个基于PyQt5和OpenPose技术的太极拳姿态识别系统的源代码和相关资源集合。系统能够实现对太极拳动作的实时姿态识别，并通过可视化界面展示出来，为学习和教学太极拳提供便利。 二、技术栈与组件 PyQt5：一个Python绑定的Qt库，用于创建图形用户界面（GUI）应用程序。它提供了丰富的组件和工具，可以方便地构建各种复杂界面，如按钮、文本框、图像视图等，同时也支持事件驱动编程，使得用户交互更加灵活。 OpenPose：一个来自卡内基梅隆大学（CMU）的开源库，主要用于人体、面部、手部以及脚部的关键点检测。它采用了深度学习的方法，能够在单张图片上实时估计多人的关节位置，对于运动分析、姿态识别等领域非常有用。
1、文件内容：pygtk2-devel-2.24.0-9.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/pygtk2-devel-2.24.0-9.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、安装指导：私信博主，全程指导安装
"金纳米超表面模型：几何相位控制下的涡旋光生成与FDTD仿真研究",几何相位 金属超表面模型 涡旋光生成 FDTD仿真 复现lunwen：2012年Nano Letters：Dispersionless Phase Discontinuities for Controlling Light Propagation lunwen介绍：金纳米结构超表面模型，金属材料矩形结构，通过旋转角度执行几何相位，构建异常折反射超表面模型，通过涡旋相位匹配几何相位，构建生产轨道角动量的涡旋光场超表面； 案例内容：主要包括金纳米柱的单元结构仿真、几何相位计算，涡旋光的螺旋相位计算代码，以及异常折反射的超表面模型和轨道角动量光束生成的超表面模型； 案例包括fdtd模型、fdtd建模脚本、Matlab相位计算代码和电场复现结果，以及一份word教程，异常折反射和涡旋光相位的构建代码可用于任意波段，具备可拓展性。 ,核心关键词： 1. 几何相位 2. 金属超表面模型 3. 涡旋光生成 4. FDTD仿真 5. 复现论文 6. 金纳米结构 7. 异常折反射超表面模型 8. 轨道角动量光束 9. 单元结构仿
comso三维声表面波诱导液滴行为研究：液滴拉伸断裂过程的可视化及分析，包含液滴最高坐标、底面接触面积、空气接触面积与能量项研究。,comso三维声表面波作用液滴，液滴拉伸断裂形成液滴，结果图包含液滴最高坐标，液滴与底面接触面积，与空气接触面积，以及能量项 ,关键词：comso三维声表面波；液滴拉伸断裂；最高坐标；接触面积（底面/空气）；能量项；结果图。,声波作用下液滴断裂，图示液滴信息及能量项分析