Dhtml+正则实现类似IDE编辑器的动态提示输入功能
2005-07-17 18:21
417 查看
代码如下:
<input onkeyup="showtips();if(event.keyCode==27)c();" id=txt onkeydown='enterTips()'>(eg. JiangSu)输完按回车键<br>
<select id=sel style='display:none' multiple onclick=rv() onkeydown='if(event.keyCode==13)rv()'></select>
<script>
var msg = new Array("Beijing","Tianjing","Shanghai","Guangdong","ShanDong","Shanxi","Hunan","Hubei","JiangSu","JiangXi");
var msg2=new Array("北京","天津","上海","广东","山东","陕西","湖南","湖北","江苏","江西");
function showtips(){
eo=event.srcElement;
sel.length=0;
var len=msg.length;
var re=new RegExp("^"+eo.value,"i")
for(i=0;i<len;i++) if(re.test(msg[i])==true) sel.style.display='',sel.add(new Option(msg[i],msg2[i])),sel.selectedIndex=0;
}
function enterTips(){
e=event.keyCode;
if(sel.style.display!='none'){
if(e==13) event.srcElement.value=sel.value,sel.style.display='none';
if(e==40) sel.focus();
}
}
function rv(){txt.value=sel.value,c()}
function c(){sel.style.display='none';txt.focus()}
document.onclick=function(){c()}
</script>
[Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码]
<input onkeyup="showtips();if(event.keyCode==27)c();" id=txt onkeydown='enterTips()'>(eg. JiangSu)输完按回车键<br>
<select id=sel style='display:none' multiple onclick=rv() onkeydown='if(event.keyCode==13)rv()'></select>
<script>
var msg = new Array("Beijing","Tianjing","Shanghai","Guangdong","ShanDong","Shanxi","Hunan","Hubei","JiangSu","JiangXi");
var msg2=new Array("北京","天津","上海","广东","山东","陕西","湖南","湖北","江苏","江西");
function showtips(){
eo=event.srcElement;
sel.length=0;
var len=msg.length;
var re=new RegExp("^"+eo.value,"i")
for(i=0;i<len;i++) if(re.test(msg[i])==true) sel.style.display='',sel.add(new Option(msg[i],msg2[i])),sel.selectedIndex=0;
}
function enterTips(){
e=event.keyCode;
if(sel.style.display!='none'){
if(e==13) event.srcElement.value=sel.value,sel.style.display='none';
if(e==40) sel.focus();
}
}
function rv(){txt.value=sel.value,c()}
function c(){sel.style.display='none';txt.focus()}
document.onclick=function(){c()}
</script>
[Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码]
相关文章推荐
- Dhtml+正则实现类似IDE编辑器的动态提示输入功能
- JS实现动态提示文本框可输入剩余字数(类似发表微博数字提示)
- 使用FlexBox和Json实现类似ComboBox(类似Google的输入提示和自动)功能-基于JQuery-ASP.NET
- jquery 实现邮箱输入自动提示功能:(一)
- 使用easyUI的combobox下拉框控件实现输入提示功能(google suggest)
- android AutoCompleteTextView 实现输入提示,类似百度支持输入拼音提示中文(gray)
- AngularJS:实现动态添加输入控件功能(转)
- Android AutoCompleteTextView控件实现类似百度搜索提示,限制输入数字长度
- ASP.NET实验五:实现输入内容提示的功能(仿google_百度输入框提示)
- AngularJS实现动态添加输入控件功能
- 实现输入内容提示的功能(仿google_百度输入框提示)jquery.ui.autocomplete.js插件
- 实现类似listView中动态添加Item的功能
- Xpages下实现输入智能提示(TypeAhead)功能
- AngularJS实现动态添加输入控件功能
- 用 jQuery + Ajax 实现 Google 的输入提示功能
- JAVA--实现类似C#输入功能的Console类
- AutoComplete实现类似Google的输入提示
- ASP.NET中实现类似MSN消息提示功能
- javascript 实现类似百度联想输入,自动补全功能
- Qt 控件 实现 QComboBox输入自动提示功能(仿Google搜索提示)