简单JS自动提示文本框代码
本例以颜色为例，为用户提供自动提示，展示效果和运行结果如图：
<body>
<form method="post" name="myForm1">
Color: <input type="text" name="colors" id="colors" onkeyup="findColors();" />
</form>
<div id="popup">
<ul id="colors_ul"></ul>
</div>
</body>
<style>
<!--
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px; padding:0px; margin:5px; form{padding:0px; margin:0px;}
input{ font-family:Arial, Helvetica, sans-serif;
font-size:12px; border:1px solid #000000;
width:200px; padding:1px; margin:0px; #popup{ position:absolute; width:202px;
color:#004a7e; font-size:12px;
font-family:Arial, Helvetica, sans-serif;
left:41px; top:25px; #popup.show{ border:1px solid #004a7e; #popup.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>
<script language="javascript">
var oInputField; //考虑到很多函数中都要使用
var oPopDiv; //因此采用全局变量的形式
var oColorsUl;
var aColors = ["red","green","blue","magenta","yellow",……"ivory","darkmagenta","cornfloewrblue"];
aColors.sort(); //按字母排序，使显示结果更友好
function initVars(){ oInputField = document.forms["myForm1"].colors;
oPopDiv = document.getElementByIdx_x("popup");
oColorsUl = document.getElementByIdx_x("colors_ul"); function clearColors(){ for(var i=oColorsUl.childNodes.length-1;i>=0;i--)
oColorsUl.removeChild(oColorsUl.childNodes[i]);
oPopDiv.className = "hide"; function setColors(the_colors){ clearColors(); //每输入一个字母就先清除原先的提示，再继续
oPopDiv.className = "show";
var oLi;
for(var i=0;i<the_colors.length;i++){ oLi = document.createElement_x("li");
oColorsUl.appendChild(oLi);
oLi.appendChild(document.createTextNode(the_colors[i]));
oLi. = function(){
this.className = "mouseOver"; //鼠标经过时高亮 oLi. = function(){
this.className = "mouseOut"; //离开时恢复原样 oLi.onclick = function(){ oInputField.value = this.firstChild.nodeValue;
clearColors(); //同时清除提示框 } function findColors(){
initVars(); //初始化变量
if(oInputField.value.length > 0){
var aResult = new Array(); //用于存放匹配结果
for(var i=0;i<aColors.length;i++) //从颜色表中找匹配的颜色 if(aColors[i].indexOf(oInputField.value) == 0)
aResult.push(aColors[i]); //压入结果
if(aResult.length>0) //如果有匹配的颜色则显示出来
setColors(aResult);
else //否则清除，用户多输入一个字母
clearColors(); //就有可能从有匹配到无，到无的时候需要清除 else
clearColors(); //无输入时清除提示框（例如用户按del键）
</script>
文本框输入提示/自动完成的Js代码
文本框输入自动匹配或提示的功能，输入内容，自动匹配对应数据，可用上下键控制选项、按回车键选择，也可以直接用鼠标选择。代码：建立实例，第一个参数是实例对象的名称，第二个是最多显示的数量。
文本框输入提示/自动完成功能
function mSift_SeekTp(oObj,nDire){if(oObj.getBoundingClientRect&&!document.all){var oDc=document.documentElement;switch(nDire){case 0:return oObj.getBoundingClientRect().top+oDc.scrollTop;case 1:return oObj.getBoundingClientRect().right+oDc.scrollLeft;case 2:return oObj.getBoundingClientRect().bottom+oDc.scrollTop;case 3:return oObj.getBoundingClientRect().left+oDc.scrollLeft;}}else{if(nDire==1||nDire==3){var nPosition=oObj.offsetLeft;}else{var nPosition=oObj.offsetTop;}if(arguments[arguments.length-1]!=0){if(nDire==1){nPosition+=oObj.offsetWidth;}else if(nDire==2){nPosition+=oObj.offsetHeight;}}if(oObj.offsetParent!=null){nPosition+=mSift_SeekTp(oObj.offsetParent,nDire,0);}return nPosition;}}
function mSift(cVarName,nMax){this.oo=cVarName;this.Max=nMax;}
mSift.prototype={
Varsion:'v2010.10.29 by AngusYoung | mrxcool.com',
Target:Object,
TgList:Object,
Listeners:null,
SelIndex:0,
Data:[],
ReData:[],
Create:function(oObj){
var _this=this;
var oUL=document.createElement('ul');
oUL.style.display='none';
oObj.parentNode.insertBefore(oUL,oObj);
_this.TgList=oUL;
oObj.onkeydown=oObj.onclick=function(e){_this.Listen(this,e);};
oObj.onblur=function(){setTimeout(function(){_this.Clear();},100);};
},
Complete:function(){},
Select:function(){
var _this=this;
if(_this.ReData.length>0){
_this.Target.value=_this.ReData[_this.SelIndex].replace(/\*/g,'*').replace(/\|/g,'|');
_this.Clear();
}
setTimeout(function(){_this.Target.focus();},10);
_this.Complete();
},
Listen:function(oObj){
var _this=this;
_this.Target=oObj;
var e=arguments[arguments.length-1];
var ev=window.event||e;
switch(ev.keyCode){
case 9://TAB
return;
case 13://ENTER
_this.Target.blur();
_this.Select();
return;
case 38://UP
_this.SelIndex=_this.SelIndex>0?_this.SelIndex-1:_this.ReData.length-1;
break;
case 40://DOWN
_this.SelIndex=_this.SelIndex=0){
_this.ReData.push(_this.Data[i]);
if(_this.ReData.length==_this.Max){break;}
}
}
var cRegPattern=_this.Target.value.replace(/\*/g,'*');
cRegPattern=cRegPattern.replace(/\|/g,'|');
cRegPattern=cRegPattern.replace(/\+/g,'\\+');
cRegPattern=cRegPattern.replace(/\./g,'\\.');
cRegPattern=cRegPattern.replace(/\?/g,'\\?');
cRegPattern=cRegPattern.replace(/\^/g,'\\^');
cRegPattern=cRegPattern.replace(/\$/g,'\\$');
cRegPattern=cRegPattern.replace(/\(/g,'\\(');
cRegPattern=cRegPattern.replace(/\)/g,'\\)');
cRegPattern=cRegPattern.replace(/\[/g,'\\[');
cRegPattern=cRegPattern.replace(/\]/g,'\\]');
cRegPattern=cRegPattern.replace(/\\/g,'\\\\');
var cRegEx=new RegExp(cRegPattern,'i');
for(var i=0;i=0){
_this.ReData[i]=_this.ReData[i].replace(/\*/g,'*');
}
if(_this.Target.value.indexOf('|')>=0){
_this.ReData[i]=_this.ReData[i].replace(/\|/g,'|');
}
cResult+='
+_this.ReData[i].replace(cRegEx,function(s){return ''+s+'';});+'
';
}
if(cResult==''){_this.Clear();}
else{
_this.TgList.innerHTML=cResult;
_this.TgList.style.cssText='display:block;position:absolute;background:#fff;border:#090 solid 1px;margin:-1px 0 0;padding: 5px;list-style:none;font-size:12px;';
_this.TgList.style.top=mSift_SeekTp(_this.Target,2)+'px';
_this.TgList.style.left=mSift_SeekTp(_this.Target,3)+'px';
_this.TgList.style.width=_this.Target.offsetWidth-12+'px';
}
var oLi=_this.TgList.getElementsByTagName('li');
if(oLi.length>0){
oLi[_this.SelIndex].style.cssText='background:#36c;padding:0 5px;line-height:20px;cursor:default;color:#fff;';
}
},
ChangeOn:function(oObj){
var oLi=this.TgList.getElementsByTagName('li');
for(var i=0;i
友情提示：文本框屏蔽了回车，因此回车键暂不可用。
//建立实例，第一个参数是实例对象的名称，第二个是最多显示的数量
var oo=new mSift('oo',20);
//数据
oo.Data=['JavaScript特效','JS效果','Js代码','Java特效','Javascript代码','JS脚本','Js是什么意思','Java','Java游戏'];
//指定文本框对象建立特效
oo.Create(document.getElementById('abc'));
var oxo=new mSift('oxo',20);
oxo.Data=['河北省','河南省','河源市','河套平原','河北承德'];
oxo.Create(document.getElementById('we'));
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关推荐
-
纯JavaScript基于notie.js插件实现消息提示特效
本文实例介绍了纯JavaScript实现消息提示特效是一款基于notie.js插件实现的可以制作Alert提示框,确认框和带输入的消息框,分享给大家供大家参考,具体内容如下 效果图: 实现的代码: html代码: <br><br><br><br><br><br> <article class="zzsc"> <div class="div-ext"> <div cl
-
JS模仿MSN右下角弹出提示框代码
aa * { margin: 0px; padding: 0px; } html, body { height: 100%; } body { font-size: 14px; line-height: 24px; } #tip { position: absolute; right: 0px; bottom: 0px; height: 0px; width: 180px; border: 1px solid #CCCCCC; background-color: #eeeeee; padding
-
JavaScript 文本框下拉提示(自动提示)
文本框下拉提示效果 html{overflow:-moz-scrollbars-vertical;} body{padding:0;margin:0;font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;} body,h1,p,blockquote,dl,dt,dd,ul,ol,li,input{margin:0;padding:0;} button,input,select,textarea {font:12px/1.5 tahoma,arial,si
-
不提示直接关闭网页窗口的JS示例代码
在IE7.IE8中,使用JavaScript提供的close()方法都可以关闭当前窗口或标签,但都提示讨厌的对话框,找了下代码,终于可以无提示直接关闭了. JavaScript代码 复制代码 代码如下: function CloseWin() { window.opener=null; window.open('','_self'); window.close(); } 实例: XML/HTML代码1.<input type=button v
-
Jquery 返回json数据在IE浏览器中提示下载的问题
今天遇到Jquery 返回json数据,IE浏览器提示下载的问题,当提交完数据后返回的本来是json数据的,在火弧里测试正常,但是IE里老是提示保存,在网上搜索了下,大部分是说将ContentType设置为"text/xml"本人测试了下,返回值为undefined, 原返回值设定:context.Response.ContentType = "application/json"; 尝试: context.Response.ContentType = "t
-
让ie运行js时提示允许阻止内容运行的解决方法
让ie运行js不再提示允许阻止内容 打开IE-工具-Internet选项-安全-自定义级别-脚本-活动脚本启用 打开IE-工具-Internet选项-高级-安全-允许活动内容在我的机器上运行
-
js实现的标题栏新消息闪烁提示效果
公司的项目中用到了这个新消息提示的效果,主要用于提示用户有新消息.具体实现代码如下: 复制代码 代码如下: var newMessageRemind = { _step: 0, _title: document.title, _timer: null, //显示新消息提示 show: function() { var temps = newMessageRemind._title.replace("[ ]", "").re
-
Chrome扩展页面动态绑定JS事件提示错误
问题描述: 当开发Chrome扩展时,页面的popup.html中需要js的时候,直接将JS写在动态绑定JS事件会提示: Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".. 解决办法: 在popup.html中引用外部的js文件动态绑定JS
-
JS仿百度搜索自动提示框匹配查询功能
1. 添加动态加载css文件 不需要引入css css全部在JS动态生成.2. 不需要额外的标签 只需要一个input输入框 并且默认指定一个class类名为 "inputElem" 当然也可以自己配置参数 还需要一个当前父级容器增加一个默认类名 parentCls(也可以自己配置),因为输入框匹配值后需要一个隐藏域 所以需要隐藏域增加一个class "hiddenCls" 当然也支持自己配置参数. 如下代码: 复制代码 代码如下: <div class=&q
-
简单JS自动提示文本框代码
本例以颜色为例,为用户提供自动提示,展示效果和运行结果如图: 1.建立框架结构: 复制代码 代码如下: <body> <form method="post" name="myForm1"> Color: <input type="text" name="colors" id="colors" onkeyup="findColors();" /> <
-
Android AutoCompleteTextView自动提示文本框实例代码
自动提示文本框(AutoCompleteTextView)可以加强用户体验,缩短用户的输入时间(百度的搜索框就是这个效果). 先给大家展示下效果图,如果大家感觉还不错,请参考实现代码: 最后一张获取文本框里面的值(其实就跟TextView.EditText一样): 首先,在xml中定义AutoCompleteTextView控件: activity_main.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/r
-
Android 自动完成文本框的实例
Android:自动完成文本框 xml文件代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_pare
-
js点击文本框弹出可选择的checkbox复选框
本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解和扩展. 代码如下: <html> <head> <meta charset="gb2312"> <title>js点击文本框弹出可选择的checkbox复选框</title> <style type="text/
-
Android自动编辑文本框(AutoCompleteTextView)使用方法详解
自动编辑文本框(AutoCompleteTextView)继承自EditText,能够接受用户的输入编辑,但是有这自己的特色功能:输入一定的字符以后会弹出下拉列表提示供用户选择,用户选择之后会自动填充文本框.这项功能正如浏览器的输入提示: 由于自动编辑文本框继承于EditText,它能够支持EditText的全部属性,但是在输入提示方面它有着自己的独特属性: android:completionHint 为弹出下拉菜单指定提示标题 android:completionThreshold
-
js光标定位文本框回车表单提交问题的解决方法
本文实例讲述了js光标定位文本框回车表单提交问题的解决方法.分享给大家供大家参考.具体分析如下: 当光标定位在辅助查找的文本框后回车,页面会出现方法的返回的json串. 原因:When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form. 翻译一下:当form中只有一个in
-
JS实现控制文本框的内容
JS 控制文本框只能输入数字 <input onkeyup="value=value.replace(/[^0-9]/g,'')" onpaste="value=value.replace(/[^0-9]/g,'')" oncontextmenu = "value=value.replace(/[^0-9]/g,'')"> JS 控制文本框只能输入数字.小数点 <input onkeyup="value=value.r
-
JS给Textarea文本框添加行号的方法
本文实例讲述了JS给Textarea文本框添加行号的方法.分享给大家供大家参考.具体如下: 这里使用JS实现让Textarea文本框显示行号的功能,每一行的前面都会有下数字序号,如果用来显示代码的话,可以直接找到某一行,如果不显示行号,则还要自己手功去查,想要此功能,你只需设置好TextArea ID,并加入代码中的JavaScript代码部分即可,文本框的长宽则是由CSS来控制的,你可试着修改一下,长宽的显示要与JS相匹配. 运行效果截图如下: 在线演示地址如下: http://demo.jb
-
Android开发高级组件之自动完成文本框(AutoCompleteTextView)用法示例【附源码下载】
本文实例讲述了Android开发高级组件之自动完成文本框(AutoCompleteTextView)用法.分享给大家供大家参考,具体如下: 通常来说自动完成文本框(AutoCompleteTextView)从EditText派生而出,实际上他也是一个编辑框,但他比普通的编辑框多了一个功能:当用户输入一定字符后,自动完成文本框会显示一个下拉菜单,供用户从中选择,当用户选择了某个菜单项过后,AutoCompleteTextView就会按用户选择自动填写该文本框. 自动完成文本框(AutoComple
-
Android高级组件AutoCompleteTextView自动完成文本框使用详解
自动完成文本框(AutoCompleteTextView),用于实现允许用户输入一定字符后,显示一个下拉菜单,供用户从中选择,当用户选择某个选项之后,按用户选择自动填写该文本框. 语法格式: <AutoCompleteTextView 属性列表> </AutoCompleteTextView> AutoCompleteTextView组件继承EditText,所以它支持EditText组件提供的属性,同时,该组件还有以下属性: android:completionHint 下拉列表