要如何在文本框中边输边出现相应的提示？

ajax in action里好像有相关示例，你可参考一下。

解决方案 »

  1.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Editable listbox</title>
    <style>
    /* Common elements */
    body{font:small/1.2em arial,helvetica,clean,sans-serif;font:x-small;}
    table{font-size:inherit;font:x-small;}/* Options Templates */
    .ac_menu{border:1px solid #3162A6;background-color:#F6F6F6;cursor:default;overflow:hidden;-moz-box-sizing:border-box;
     height:expression((this.scrollHeight>210)?"210px":"auto")}
    .ac_menuitem{width:100%;color:#141414;padding:2px;cursor:pointer;cursor:hand;}
    .ac_menuitem_selected{background-color:#D6DEEC;width:100%;color:#141414;padding:2px;cursor:pointer;cursor:hand;}
    /* JK */
    .minHeightTextarea{
     height:expression((this.scrollHeight>150)?"150px":(this.scrollHeight+5)+"px");
     overflow : auto;
    }
    </style><script language=javascript>
    var tofieldListArray=["[email protected]","深圳市科技园","深圳市罗湖东门","深圳市罗\"湖东门","深圳市罗'湖东门","1000", "1001", "1002", "1003", "1004", "1005", "1006", "1007", "1008", "1009",
    "1010", "1011", "1012", "1013", "1014", "1015", "1016", "1017", "1018", "1019",
    "1020", "1021", "1022", "1023", "1024", "1025", "1026", "1027", "1028", "1029",
    "1030", "1031", "1032", "1033", "1034", "1035", "1036", "1037", "1038", "1039",
    "1040", "1041", "1042", "1043", "1044", "1045", "1046", "1047", "1048", "1049"
    ];
    var ccfieldListArray=tofieldListArray;
    </script> 
     
    <script language=javascript>
     var AC_TAB = 9;   // make the selection
     var AC_ENTER = 13;   // make the selection
     var AC_UP_ARROW = 38;    // move the drop down list selection up by one
     var AC_DOWN_ARROW = 40;  // move the drop down list selection down by one
     var theListDiv;
     var theListArray;
     var theComboxObj;
     onload=OnLoad
     function OnLoad()
     {
      setTimeout("Initialize()", 100);
     }
     function Initialize()
     {
       AddListDivFun(document.all.tofield); 
       AddListDivFun(document.all.ccfield); 
     }
     
     function AddListDivFun(obj)
     {
      theListArray=eval(obj.id+"ListArray");
      var tempStr=new Array();
      var tempI=0;
      tempStr[tempI++]='<DIV style="position:relative;visibility:hidden">'
        +'<DIV class=ac_menu id="'+obj.id+'ListDiv" style="FONT-SIZE: 0.9em; Z-INDEX: 1; visibility:hidden; POSITION: absolute;OVERFLOW-Y:auto; WIDTH:'+obj.offsetWidth+'; " '
        +'onmouseover="mouseOverListDivFun(event)" onmouseout="mouseOutListDivFun(event);" onmousedown="mouseDownListDivFun(event);" onscroll="scrollListDivFun();">';
      tempStr[tempI++]="</DIV></DIV>";
      obj.insertAdjacentHTML("afterEnd",tempStr.join(""));
      theListDiv=eval(obj.id+"ListDiv");
      obj.onfocus=AC_OnFocus;
      obj.onblur=AC_OnBlur;
      obj.onkeydown=AC_OnKeyDown;
      obj.autoComplete="off";
      obj.onpropertychange=AC_OnPropertyChange;
     }
     
     function AC_OnFocus(obj)
     {
      if(obj==null) obj=event.srcElement;
      theListDiv=eval(obj.id+"ListDiv");
      theListArray=eval(obj.id+"ListArray");
      theComboxObj=obj;
      theListDiv.style.visibility="visible";
      //adjustListDivScroll();
     }
     
     function AC_OnBlur(obj)
     {
      if(obj==null) obj=event.srcElement;
      if(theListDiv.contains(document.activeElement)) obj.focus();
      else theListDiv.style.visibility="hidden";
     }
     
     function AC_OnPropertyChange(obj)
     {
      if(obj==null) obj=event.srcElement;
      theListDiv=eval(obj.id+"ListDiv");
      if(theListDiv==null) return ;
      theListArray=eval(obj.id+"ListArray");
      var objValue=obj.value;
      if(objValue.length==0){
       theListDiv.innerHTML="";
       theListDiv.selectedIndex=-1;
       theListDiv.selectedItemIndex=-1;
       return;  
      }
      var objValueHtml=htmlEncode(objValue);
      theListDiv.selectedIndex=-1;
      var theLastVisibleIndex=0
      var tempStr=new Array();
      var numOfVisibleItems=0;
      for(theLastVisibleIndex=0;theLastVisibleIndex<theListArray.length;theLastVisibleIndex++)
      {
       if(theListArray[theLastVisibleIndex].indexOf(objValue)==0)
       {
        if(numOfVisibleItems==13){
         tempStr[numOfVisibleItems]="<DIV class=ac_menuitem  value="+theLastVisibleIndex+" id=virtualMoreItems itemIndex="+numOfVisibleItems+"><b>...More...</b></DIV>";
         numOfVisibleItems++;
         break;
        }
        else{
         tempStr[numOfVisibleItems]="<DIV class=ac_menuitem  value="+theLastVisibleIndex+" itemIndex="+numOfVisibleItems+"><b>"+objValueHtml+"</b>"+htmlEncode(theListArray[theLastVisibleIndex].substr(objValue.length))+"</DIV>";
         numOfVisibleItems++;
        }
       }
      }
      

  2.   

    theListDiv.innerHTML=tempStr.join("");
      if(numOfVisibleItems>0) 
      {
       theListDiv.selectedIndex=theListDiv.children[0].value;
       theListDiv.selectedItemIndex=0;
       theListDiv.children[0].className="ac_menuitem_selected";
       adjustListDivScroll();
      }
      else{
       theListDiv.selectedIndex=-1;
       theListDiv.selectedItemIndex=-1; 
      }
     }
     
     function AC_OnKeyDown(obj)
     {
      if(theListDiv==null) return ;
      if(obj==null) obj=event.srcElement;
      var keyCode=event.keyCode;
      if(keyCode==AC_ENTER) keyCode=event.keyCode=AC_TAB;
      if(keyCode==AC_TAB && theListDiv.selectedIndex!=-1) 
      {
       if(obj.value!=theListArray[theListDiv.selectedIndex]) obj.value=theListArray[theListDiv.selectedIndex];
       return ;
      }
      
      if(keyCode==AC_UP_ARROW && theListDiv.selectedItemIndex>0)
      {
       theListDiv.children[theListDiv.selectedItemIndex].className="ac_menuitem";
       theListDiv.selectedItemIndex=theListDiv.selectedItemIndex*1-1;
       theListDiv.selectedIndex=theListDiv.children[theListDiv.selectedItemIndex].value;
       theListDiv.children[theListDiv.selectedItemIndex].className="ac_menuitem_selected";
       adjustListDivScroll();
      }
     
      if(keyCode==AC_DOWN_ARROW && theListDiv.selectedItemIndex<theListDiv.children.length-1)
      {
       theListDiv.children[theListDiv.selectedItemIndex].className="ac_menuitem";
       theListDiv.selectedItemIndex=theListDiv.selectedItemIndex*1+1;
       theListDiv.selectedIndex=theListDiv.children[theListDiv.selectedItemIndex];
       theListDiv.children[theListDiv.selectedItemIndex].className="ac_menuitem_selected";
       adjustListDivScroll();
      }
     
     }
     
     function htmlEncode(str)
     {
      if(str==null) return "";
      str=str.replace(/</ig,"&lt;")
      str=str.replace(/>/ig,"&gt;");
      str=str.replace(/"/ig,"&quot;");
      return str;
     }
     
     function scrollListDivFun()
     {
      var virtualMoreItemsObj=theListDiv.children["virtualMoreItems"];
      if(virtualMoreItemsObj==null) return;
      var theLastVisibleIndex=virtualMoreItemsObj.value*1;
      var objValue=theComboxObj.value;
      var objValueHtml=htmlEncode(objValue);
      var tempStr=new Array();
      var numOfVisibleItems=virtualMoreItemsObj.itemIndex*1;
      for(;theLastVisibleIndex<theListArray.length;theLastVisibleIndex++)
      {
       if(theListArray[theLastVisibleIndex].indexOf(objValue)==0)
       {
        if(numOfVisibleItems==203){
         tempStr[numOfVisibleItems]="<DIV class=ac_menuitem  value="+theLastVisibleIndex+" itemIndex="+numOfVisibleItems+" onmousedown='replaceThisWithAllLeftItems(this);'><b>...Click to show all items...</b></DIV>";
         numOfVisibleItems++;
         break;
        }
        else{
         tempStr[numOfVisibleItems]="<DIV class=ac_menuitem  value="+theLastVisibleIndex+" itemIndex="+numOfVisibleItems+"><b>"+objValueHtml+"</b>"+htmlEncode(theListArray[theLastVisibleIndex].substr(objValue.length))+"</DIV>";
         numOfVisibleItems++;
        }
       }
      }
      virtualMoreItemsObj.outerHTML=tempStr.join("");
     }
     
     function replaceThisWithAllLeftItems(obj)
     {
      var virtualMoreItemsObj=obj;
      if(virtualMoreItemsObj==null) return;
      var theLastVisibleIndex=virtualMoreItemsObj.value*1;
      var objValue=theComboxObj.value;
      var objValueHtml=htmlEncode(objValue);
      var tempStr=new Array();
      var numOfVisibleItems=virtualMoreItemsObj.itemIndex*1;;
      for(;theLastVisibleIndex<theListArray.length;theLastVisibleIndex++)
      {
       if(theListArray[theLastVisibleIndex].indexOf(objValue)==0)
       {
        tempStr[numOfVisibleItems]="<DIV class=ac_menuitem  value="+theLastVisibleIndex+" itemIndex="+numOfVisibleItems+"><b>"+objValueHtml+"</b>"+htmlEncode(theListArray[theLastVisibleIndex].substr(objValue.length))+"</DIV>";
        numOfVisibleItems++;
       }
      }
      virtualMoreItemsObj.outerHTML=tempStr.join("");
      event.cancelBubble=true;
     }
     
     
     function mouseOverListDivFun(event)
     {
      if(event.toElement!=theListDiv) event.toElement.style.backgroundColor="#E6E6E6";
     }
     
     function mouseOutListDivFun(event)
     {
      if(event.fromElement!=theListDiv) event.fromElement.style.backgroundColor="";
     }
     
     function mouseDownListDivFun(event)
     {
      var selectedStr="";
      if(event.srcElement==theListDiv) return;
      else if(event.srcElement.tagName=="B") selectedStr=theListArray[event.srcElement.parentElement.value] ;
      else selectedStr=theListArray[event.srcElement.value];
      if(theComboxObj.value!=selectedStr)theComboxObj.value=selectedStr;
      theComboxObj.blur();
     }
     function adjustListDivScroll()
     {
      if ( theListDiv==null || theListDiv.selectedItemIndex==-1 || theListDiv.children.length==0 ) return ;
      var i=theListDiv.selectedItemIndex;
      if((theListDiv.children[i].offsetTop<theListDiv.scrollTop)||(theListDiv.children[i].offsetTop>theListDiv.scrollTop+200))
       theListDiv.children[i].scrollIntoView();
     }
     
    </script>
     
    </head> 
    <body >
     
      
    <form name="Compose" id="Compose" method=post action="/ym/Compose?YY=61185">
    <table cellpadding=4 cellspacing=0 border=0 width="100%">
    <tr>
    <td >Mail To:</td>
    <td style="padding-top:0px;" >
    <textarea name="To" class="minHeightTextarea" style="width:300" tabindex="1" id="tofield" 
    rows="1"  title="textarea" cols="20">深圳</textarea>
    </td>
    </tr>
    <tr>
    <td >Mail Cc:</td>
    <td style="padding-top:0px;" >
    <input name="Cc" style="width:300" tabindex="1" id="ccfield" value=a title="input">
    </td>
    </tr>
    <tr>
    <td colspan=2>若需要不被select档住的可输入下拉框，请联系<a href="mailTo:[email protected]?subject=About%20Editable%20Select">JK本人</a>
    <br>------(只是想统计一下有没有人在真正使用)</td>
    </tr>
    <tr>
    <td colspan=2>
    <br>
    <br>注1:EditableSelect4不是EditableSelect1的升级版，而是互补版，主要目的是想提高效率，支持3000或更多条选项，功能上有以下不同：
    <br>&nbsp;&nbsp;a.可以达到，在3000或更多条选项选项时，反应时间在一秒内。
    <br>&nbsp;&nbsp;b.输入长度大于0时才将过滤后的选项列出。
    <br>&nbsp;&nbsp;c.先只列出可见的十条，scroll时列出200条，如果还有更多，让用户决定是否将所有的选项列出。
    <br>&nbsp;&nbsp;d.舍弃“相等优先于相似”的功能。
    <br>
    <br>注------：作者JK：[email protected].
    </td>
    </table></form>
    </body>
    </html>
      

  3.   

    <input onkeyup="showtips();if(event.keyCode==27)c();" id=txt onkeydown='enterTips()'>(eg. ShanDong)<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");
    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>
      

  4.   

    http://www.google.com/search?hl=en&q=ajax+autocomplete