`
wolfmaster
  • 浏览: 155280 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

AutoComplete

    博客分类:
  • js
阅读更多
参考这个页面
<!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.0   Transitional//EN ">
<HTML> <HEAD>
<META   http-equiv=Content-Type   content= "text/html;   charset=gb2312 ">
<META   content= "MSHTML   6.00.6000.16441 "   name=GENERATOR> </HEAD>
<BODY> <XMP>   我想做一个这样的输入框:它有一个下拉的可选列表,列表内容是已知的可能会输入文字;
在输入一个字或词后它会自动调整顺序,把前面几个字符匹配的选项移到上面来,如果没有匹配
的就不管你,让你自个儿输入。(当然,列表里已有的也可以用鼠标点击输入可用键盘选中输入)
  其实说半天也就是象   IE   的地址输入框啦!
</XMP> <BR>
<INPUT  id='txt'   onkeydown='enterTips()' onkeyup='showtips();if(event.keyCode==27)c();'> (eg.   ShanDong) <BR>
<SELECT id='sel'  onkeydown='if(event.keyCode==13)rv()'   style='DISPLAY:none;' onclick='rv()'> </SELECT>
<SCRIPT>
var   msg   =   new   Array( "Beijing ", "Tianjing ", "Shanghai ", "Guangdong ", "ShanDong ", "Shanxi ", "Hunan ", "Hubei ");
var   msg2=new   Array( "北京 ", "天津 ", "上海 ", "广东 ", "山东 ", "陕西 ", "湖南 ", "湖北 ");

function   showtips()
{
eo=event.srcElement;
sel.length=0;
var   len=msg.length;
var   re=new   RegExp( "^"+eo.value, "i")
var   j=0
for(i=0;i <len;i++)  
if(re.test(msg[i])==true)
{  sel.style.display= '';
   sel.add(new Option(msg[i],msg2[i]));
   j++
}
sel.size  = (j> 1)?j:2;
}

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>
  </BODY> </HTML>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics