简单JS自动提示文本框

Css代码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;
 padding:1px;
 margin:0px;
 width:200px;
}
#popup
{/*提示框div樣式*/
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;
}javascript代码
<script language="javascript" type="text/javascript">
         var oInputField;//考慮到很多函數都要使用
         var oPopDiv;   //因此採用全局變量的形式
         var oColorsUl;
         var aColors=["red","green","blue","magenta","yellow","chocolate","black","aquamarine","lime","darkgreen","darkhaki","ivory","darmagenta","cornfloewrblue","purple"];
         aColors.sort();//按字母排序，使結果友好顯示
         
         function initVars()
         {
            //初始化變量
            oInputField=document.forms["myForm1"].colors;
            oPopDiv=document.getElementById["popup"];
            oColorsUI=document.getElementById["colors_ul"];
            
         }
         function clearColors(){
         //清除提示內容
         
         for(var i=oColorsUI.childNodes.length-1;i>=0;i--)
         oColorsUI.removeChild(oColorsUI.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("li");
           oColorsUl.appendChild(oLi);
           
           oLi.appendChild(document.createTextNode(the_colors[i]));
           
           
           oLi.onmouseover=function(){
            this.className="mouseOver";//鼠標指針經過時高亮
            
           }
           
           oLi.onmouseout=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();//無輸入時清除提示框
            
            
         }
    </script>aspx代码
<body>
    <form  method="post" name="myForm1" action="Default.aspx">
    Color:
    <input type="text" name="colors" id="colors" onkeyup="findColors();" />
    </form>
    <div id="popup">
    <ul id="colors_ul"></ul>
    </div>
    
</body>以上为提示框的所有代码，不知道是哪里出错了，一直在报错：Microsoft JScript runtime error: 'oColorsUI.childNodes' is null or not an object。

解决方案 »

  1.   


     oColorsUI=document.getElementById["colors_ul"];  //这里得到了id为colors_ul的ul oColorsUI.childNodes.length-1  //你这里得他的子节点的个数，然后减1.。//当然会报这个错了。。 <ul id="colors_ul"></ul>//你di为colors_ul的里面根本就没有子节点了。
      

  2.   

    首先是运行findColors()这个函数的。找到匹配的再增加子节点。
      

  3.   

    的先调用这个initVars()，才能初始化oColorsUI，否则就有错
      

  4.   

    你现在<ul id="colors_ul"></ul>之间加几个节点试下，这里提示确实是你的UL里面没有节点造成的
      

  5.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
        <html>  
            <head>  
                <title>google.html</title>  
                <meta http-equiv="content-type" content="text/html;charset=GBK">  
                <script type="text/javascript" src="js/jquery-1.3.2.js" charset="GBK"></script>  
         
               <script type="text/javascript">  
                   var line = 0;  
                   var oldValue = '';  
                   function del() {  
                       if ($("#newDiv")) {  
                           $("#newDiv").remove();  
                           line = 0;  
                       }  
                   }  
                 
                   $(document).ready(function() {  
                       //文本框失去焦点时层消失  
                           $(document.body).click(function() {  
                              del();  
                           });  
                   });  
                 
                   function vchange() {  
                      //alert("value change");  
                       del();  
         
                       //定位DIV  
                       var top = $("#key").offset().top;  
                       var left = $("#key").offset().left;  
                       var newDiv = $("<div/>").width($("#key").width() + 6).css(  
                               "position", "absolute").css("backgroundColor", "white")  
                               .css("left", left).css("top", top + $("#key").height() + 6)  
                               .css("border", "1px solid blue").attr("id", "newDiv");  
         
                       /*过滤非法字符输入*/  
                       if($("#key").value != ""){  
                           //alert(oldValue);  
                             
                           /*过滤同名多次查询*/  
                           if ($("#key").val() != oldValue) {  
                               oldValue = $("#key").val();  
                               var url = 'tsearch.action';  
                               var params = {  
                                       //POST参数编码处理  
                                   key : encodeURI($("#key").val())  
                               };  
                               jQuery.post(url, params, callbackFun, 'json');  
                           }  
                           $(document.body).append(newDiv); //添加DIV  
                       }  
         
                       if ($("#key").val() == "") {  
                           $("#newDiv").remove();  
                       }  
                   }  
                 
                   //回调函数  
                   function callbackFun(data) {  
                       var table = $("<table width='100%'/>").attr("cellpadding", "0").attr(  
                               "cellspacing", "0");  
                       if (data.result == "") {  
                           //alert("你的关键字有误！");  
                           var tr = $("<tr/>");  
                           var td1 = $("<td/>").html("记录为空").css("fontSize", "12px")  
                           .css("margin", "5 5 5 5");  
                          tr.append(td1);  
                           table.append(tr);  
                           $("#newDiv").append(table);  
                       } else {  
                           var array = data.result.split(",");  
                           for ( var i = 0; i < array.length - 1; i++) {  
                               //alert(array[i]);  
                              var tr = $("<tr/>").css("cursor", "pointer").mouseout(  
                                       function() {  
                                           $(this).css("backgroundColor", "white").css(  
                                                   "color", "black");  
                                       }).mouseover(  
                                       function() {  
                                           $(this).css("backgroundColor", "blue").css("color",  
                                                   "white");  
                                       }).click(function() {  
                                   $("#key").val($(this).find("td").eq(0).html());  
                                   del();  
                               });  
                                 
                               var td1 = $("<td/>").html(array[i]).css("fontSize", "12px")  
                                       .css("margin", "5 5 5 5");  
                               tr.append(td1);  
                               table.append(tr);  
                               $("#newDiv").append(table);  
                           }  
                       }  
                   }  
             </script>  
           </head>  
         
           <body>  
             <h1>Google搜索</h1>  
              <div style="margin-top: 20px; margin-left: 30px">  
                 请输入搜索关键字:  
                  <input name="key" id="key" onkeyup="vchange()" style="width: 300">  
                  <input type="button" value="Goolge一下">  
              </div>  
          </body>  
     </html>  下载jquery-1.3.2.js
    放js文件夹下 保存HTMl看效果