自动完成功能

在文本框中每输入一个字，下面会显示出包含这些字的可选条目。请问如何实现。请高手赐教！谢谢

解决方案 »

  1.   

    AJAX 实现吧~！ 简单方便
      

  2.   

    百度 google搜索：autocomplete
      

  3.   

    参考
    http://www.mscto.com/JavaScript/22648705.html
      

  4.   

    <script>   
      function   auto(obj)   
      {   
      document.all.mysel.style.width=obj.clientWidth;   
      document.all.mysel.style.display='block';   
      }   
      function   mykey()   
      {   
      if(event.keyCode==40)   
      {   
      if(mysel.obj==null)   
      mysel.obj=mysel.document.all.div1;   
      else   
      {   
      mysel.obj.style.background='';mysel.obj.style.color='';   
      try{   
      mysel.obj=mysel.obj.nextSibling;   
      }   
      catch(e)   
      {}   
      }   
      try{   
      mysel.obj.style.background='blue';mysel.obj.style.color='white';   
      if(mysel.obj.offsetTop>60)mysel.document.body.scrollTop+=10;   
      }   
      catch(e)   
      {}   
      }   
      else   if(event.keyCode==38)   
      {   
      if(mysel.obj==null)   
      mysel.obj=mysel.document.all.div1;   
      else   
      {   
      mysel.obj.style.background='';mysel.obj.style.color='';   
      try{   
      mysel.obj=mysel.obj.previousSibling;   
      }   
      catch(e)   
      {}   
      }   
      try{   
      mysel.obj.style.background='blue';mysel.obj.style.color='white';   
      if(mysel.obj.offsetTop<40)mysel.document.body.scrollTop-=10;   
      }   
      catch(e)   
      {}   
      }   
      else   if(event.keyCode==13)   
      {   
      try{   
      document.all.mytxt.value=mysel.obj.innerHTML;   
      document.all.mysel.style.display='none';   
      }   
      catch(e)   
      {}   
      }   
      }   
      </script>   
      <body   onkeydown="mykey()">   
      <input   type=text   name=mytxt   onclick=auto(this)><br>   
      <iframe   src="sel.htm"   name=mysel   style="display:none"   height=100   onmouseout="this.style.display='none'">   
      </iframe>   
        
      sel.htm   
      <body   onload="obj=null;"   style="font:10pt;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0"   onmouseover="if(event.clientY>60)document.body.scrollTop+=10;   else   if(event.clientY<60)document.body.scrollTop-=10">   
      <div   id=div1   onmouseover="obj=this;this.style.background='blue';this.style.color='white'"   onmouseout="this.style.background='';this.style.color=''"   onclick="top.document.all.mytxt.value=this.innerHTML;top.document.all.mysel.style.display='none'">1234</div>   
      <div   id=div2   onmouseover="obj=this;this.style.background='blue';this.style.color='white'"   onmouseout="this.style.background='';this.style.color=''"   onclick="top.document.all.mytxt.value=this.innerHTML;top.document.all.mysel.style.display='none'">5678</div>   
      <div   id=div3   onmouseover="obj=this;this.style.background='blue';this.style.color='white'"   onmouseout="this.style.background='';this.style.color=''"   onclick="top.document.all.mytxt.value=this.innerHTML;top.document.all.mysel.style.display='none'">9999</div>   
      <div   id=div4   onmouseover="obj=this;this.style.background='blue';this.style.color='white'"   onmouseout="this.style.background='';this.style.color=''"   onclick="top.document.all.mytxt.value=this.innerHTML;top.document.all.mysel.style.display='none'">0000</div>   
      <div   id=div5   onmouseover="obj=this;this.style.background='blue';this.style.color='white'"   onmouseout="this.style.background='';this.style.color=''"   onclick="top.document.all.mytxt.value=this.innerHTML;top.document.all.mysel.style.display='none'">wwww</div>   
      <div   id=div6   onmouseover="obj=this;this.style.background='blue';this.style.color='white'"   onmouseout="this.style.background='';this.style.color=''"   onclick="top.document.all.mytxt.value=this.innerHTML;top.document.all.mysel.style.display='none'">qqqq</div>   
      <div   id=div7   onmouseover="obj=this;this.style.background='blue';this.style.color='white'"   onmouseout="this.style.background='';this.style.color=''"   onclick="top.document.all.mytxt.value=this.innerHTML;top.document.all.mysel.style.display='none'">tttt</div>   
      <div   id=div8   onmouseover="obj=this;this.style.background='blue';this.style.color='white'"   onmouseout="this.style.background='';this.style.color=''"   onclick="top.document.all.mytxt.value=this.innerHTML;top.document.all.mysel.style.display='none'