<!doctype html>
<html>
<style>
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.auto_hidden {
width:204px;border-top: 1px solid #333;
border-bottom: 1px solid #333;
border-left: 1px solid #333;
border-right: 1px solid #333;
position:absolute;
display:none;
}
.auto_show {
width:204px;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
border-left: 1px solid #333;
border-right: 1px solid #333;
position:absolute;
z-index:9999; /* 设置对象的层叠顺序 */
display:block;
}
.auto_onmouseover{
color:#ffffff;
background-color:highlight;
width:100%;
}
.auto_onmouseout{
color:#000000;
width:100%;
background-color:#ffffff;
}
</style>
<script language="javascript">
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
}
var Bind = function(object, fun) {
return function() {
return fun.apply(object, arguments);
}
}
function AutoComplete(obj,autoObj,arr){
this.obj=$(obj); //输入框
this.autoObj=$(autoObj);//DIV的根节点
this.value_arr=arr; //不要包含重复值
this.index=-1; //当前选中的DIV的索引
this.search_value=""; //保存当前搜索的字符
}
AutoComplete.prototype={
//初始化DIV的位置
init: function(){
this.autoObj.style.left = this.obj.offsetLeft + "px";
this.autoObj.style.top = this.obj.offsetTop + this.obj.offsetHeight + "px";
this.autoObj.style.width= this.obj.offsetWidth - 2 + "px";//减去边框的长度2px
},
//删除自动完成需要的所有DIV
deleteDIV: function(){
while(this.autoObj.hasChildNodes()){
this.autoObj.removeChild(this.autoObj.firstChild);
}
this.autoObj.className="auto_hidden";
},
//设置值
setValue: function(_this){
return function(){
_this.obj.value=this.seq;
_this.autoObj.className="auto_hidden";
}
},
//模拟鼠标移动至DIV时,DIV高亮
autoOnmouseover: function(_this,_div_index){
return function(){
_this.index=_div_index;
var length = _this.autoObj.children.length;
for(var j=0;j<length;j++){
if(j!=_this.index ){
_this.autoObj.childNodes[j].className='auto_onmouseout';
}else{
_this.autoObj.childNodes[j].className='auto_onmouseover';
}
}
}
},
//更改classname
changeClassname: function(length){
for(var i=0;i<length;i++){
if(i!=this.index ){
this.autoObj.childNodes[i].className='auto_onmouseout';
}else{
this.autoObj.childNodes[i].className='auto_onmouseover';
this.obj.value=this.autoObj.childNodes[i].seq;
}
}
}
,
//响应键盘
pressKey: function(event){
var length = this.autoObj.children.length;
//光标键"↓"
if(event.keyCode==40){
++this.index;
if(this.index>length){
this.index=0;
}else if(this.index==length){
this.obj.value=this.search_value;
}
this.changeClassname(length);
}
//光标键"↑"
else if(event.keyCode==38){
this.index--;
if(this.index<-1){
this.index=length - 1;
}else if(this.index==-1){
this.obj.value=this.search_value;
}
this.changeClassname(length);
}
//回车键
else if(event.keyCode==13){
this.autoObj.className="auto_hidden";
this.index=-1;
}else{
this.index=-1;
}
},
//程序入口
start: function(event){
if(event.keyCode!=13&&event.keyCode!=38&&event.keyCode!=40){
this.init();
this.deleteDIV();
this.search_value=this.obj.value;
var valueArr=this.value_arr;
valueArr.sort();
if(this.obj.value.replace(/(^\s*)|(\s*$)/g,'')==""){ return; }//值为空,退出
try{ var reg = new RegExp("(" + this.obj.value + ")","i");}
catch (e){ return; }
var div_index=0;//记录创建的DIV的索引
for(var i=0;i<valueArr.length;i++){
if(reg.test(valueArr[i])){
var div = document.createElement("div");
div.className="auto_onmouseout";
div.seq=valueArr[i];
div.onclick=this.setValue(this);
div.onmouseover=this.autoOnmouseover(this,div_index);
div.innerHTML=valueArr[i].replace(reg,"<strong>$1</strong>");//搜索到的字符粗体显示
this.autoObj.appendChild(div);
this.autoObj.className="auto_show";
div_index++;
}
}
}
this.pressKey(event);
window.onresize=Bind(this,function(){this.init();});
}
}
//-->
</SCRIPT>
<body>
<h1 align="center">自动完成函数(Autocomplete Function)</h1>
<div align="center"><input type="text" style="width:300px;height:20px;font-size:14pt;" id="o" onkeyup="autoComplete.start(event)"></div>
<div class="auto_hidden" id="auto"><!--自动完成 DIV--></div>
<script>
var autoComplete=new AutoComplete('o','auto',['b0','b12','b22','b3','b4','b5','b6','b7','b8','b2','abd','ab','acd','accd','b1','cd','ccd','cbcv','cxf']);
</SCRIPT>
</body>
</html>
- 浏览: 730895 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
梦行Monxin商城系统:
java网上商城与php网上商城比较 -
梦行Monxin商城系统:
java网上商城与php网上商城比较 -
任楚娴:
你好,请问html = nvl(html); 这句中的nvl( ...
java html串转换成文本串 -
u013246812:
,谢拉!
jQuery ui Dialog 讲解参数 -
大宝剑99:
...
前端优化
发表评论
-
Chrome扩展程序-BES Blocker
2020-11-27 08:35 204## 使用说明 - Change the response ... -
全国最新行政区划代码(Tree)json数据以及地理数据
2020-11-11 21:23 333基于阿里提供的地理数据 http://datav.aliyun ... -
百度搜索api
2020-11-07 15:26 566<div class="iteye-blog- ... -
Puppeteer 说明记录
2020-11-06 10:52 553<div class="iteye-blo ... -
文本水印
2019-12-20 17:55 416打开控制台,copy如下代码: (functio ... -
unicode字符集特殊符号对应html/js/css符号
2019-04-24 14:46 684转自: http://www.cnblogs.com/cha ... -
网站灰度支持
2015-01-02 07:22 8151 <style>html {overflo ... -
js 端排序 获取td里边的内容去html串化
2014-09-26 18:12 794<script> function delHtml ... -
ie浏览器下的css expression使用
2014-03-06 16:39 1179针对ie浏览器有些情况下显示效果比较差,所以针对ie ... -
js 屏蔽form的onkeydown onkeyup onkeypress 的13按键
2013-07-11 10:49 1766js 屏蔽form的onkeydown onkeyup on ... -
Cookie path的设置
2013-02-21 10:58 1906cookie path 设置 IE对如下的co ... -
html5 (标签一览)
2012-10-16 19:22 986html5 标签 按字母顺序排 ... -
一键分享腾讯微博,新浪微博等api(WEB 版)
2012-08-10 09:38 10367腾讯微博分享 <script type=" ... -
DOJO js 基本dom操作
2012-06-20 09:44 4579/** ** 基本的DOM操作只是用到了dojo的核 ... -
原始ajax api 操作
2012-04-12 18:00 1073String.prototype.trim = func ... -
js 动态 添加 删除 tr
2012-04-12 17:27 5738今天给新人出了一道题: dom 和 javascrip ... -
ie8下 vml
2012-04-01 13:51 1657近期在做web流程设计器,在ie7下没有问题,显示出来了,但是 ... -
flex vs html5
2011-12-18 18:09 2124何时使用HTML5,而不是Fl ... -
java毕业设计 计算机毕业设计 软件定制开发
2011-10-01 07:00 86工作室承接各种毕业设计以及软件定制开发。 java毕业设计 ... -
opener parent showModalDialog父窗口
2011-09-19 09:31 3505opener与parent的区别 opene ...
相关推荐
清除input在浏览器中自动填充用户名等的情况,JQuery解决,IE8 ,chrome等均可以使用。
jQuery实现输入框自动补全邮箱提示jQuery实现输入框自动补全邮箱提示
使用Jquery定时实现显示隐藏,并且自动填充,,判断显示隐藏文本框,小功能凑字数凑字数凑字数凑字数凑字数
监听短信数据库变化,拿到特定号码的短信,截取中间的数字,填充到指定控件中。
防止自动填充.js 尝试阻止浏览器自动填充功能访问表单输入。 专为对抗 Chrome 的自动填充功能而创建。 Chrome 似乎并不关心我在任何类型的地址表单上的“自动完成”设置,无论自动完成属性放在哪个元素上。 唯一的...
本文为大家写了个很漂亮、兼容火狐的Js日期选择,自动填充到输入框,代码如下,有需要的朋友可以参考下
利用javascript实现类似于百度,谷歌搜索的自动模糊搜索补全提示的功能,代码中已有详细的注释信息,可以实现鼠标点击,上下方向键浏览点击,enter确认等常用功能,可移植性不错。
主要介绍了JS中解决谷歌浏览器记住密码输入框颜色改变功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
我就废话不多说了,大家还是直接看代码吧~ <Input v-model=”relatedWords” type=”textarea” placeholder=”请输入” @input=’verifyInput(formItem.relatedWords)’/> verifyInput(v){ ...
很漂亮、兼容火狐的Js日期选择,自动填充到输入框
demo,可直接运行查看效果,实现的效果是:在输入框中输入汉字时触发keyup事件,即自动出现多个选项,选中某选项时自动将该选项值和所需属性填充到指定输入框中。
解决方法:因为浏览器是否自动填充内容,根据type=password来判断的。此时先将作为密码的输入框的type设成text,当点击密码输入框的时候,将其type属性设为password,这样问题就解决了。 HTML页面代码如
点击一个按钮弹出一个日历,从日历选种日期自动填充到对应的输入框里。 <input id="funcendtime" name="funcendtime" type="text" class="text" /> <i id="imgDate" class="date"></i> $("#funcendtime")....
6、el-form 选择一项时自动填充相关内容(仅有js代码做参考,该功能未在此页面使用) 7、两行输入栏合做一行(目的:输入框太多,省省高度) 另输入框 数字统计show-word-limit 和 表格超出隐藏 :tooltip-effect=" ...
element的表单元素使用总结 表单元素挺多的,这里简单总结下,我以我的方式主要分为:文本框类...主要有:普通文本框、密码框、文本域、计数器、日期选择器、自动填充文本框、有前缀的文本框。 普通文本框:disable
示例描述:JavaScript快速处理日期时间的操作。 5_1.htm 获取当前日期并显示在HTML页中。 5_2.htm 分别获取当前时间的年月日时分秒。 5_3.htm 时间的水中倒影。 5_4.htm 简单的日历。 5_5.htm 标题栏显示...
JavaScript实例精通 1.本书1~20章所附代码的运行环境 操作系统:Windows 2003、Windows XP Professional,或者Windows 2000 开发环境:、Dreamwave、Notepad、UltraEdit,或者其他文本编辑器 Web服务器:IIS 5.1及...
该插件将具有以下功能: 1. 点击输入框时,将显示日期选择器。 2. 日期选择器上方有一个年份和月份选择器,可以向左或向右切换。...4. 当用户选择一个日期后,插件将自动将选定的日期填充到输入框中。
我不想自动填充,然后进入每个遗漏的字段,浪费时间输入虚拟文本...所以我建立了这个东西! 显着的问题: Maven非常沮丧。 方向: 将仓库克隆到目录中 前往chrome:// extensions 开启开发人员模式(右上方应该...