JavaScript文本提示 

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html>
  3 <head>
  4 <title>自动提示的文本框</title>
  5 <style>
  6 <!--
  7 body{
  8     font-family:Arial, Helvetica, sans-serif;
  9     font-size:12px; padding:0px; margin:5px;
 10 }
 11 form{padding:0px; margin:0px;}
 12 input{
 13 /* 用户输入框的样式 */
 14     font-family:Arial, Helvetica, sans-serif;
 15     font-size:12px; border:1px solid #000000;
 16     width:200px; padding:1px; margin:0px;
 17 }
 18 #popup{
 19 /* 提示框div块的样式 */
 20     position:absolute; width:202px;
 21     color:#004a7e; font-size:12px;
 22     font-family:Arial, Helvetica, sans-serif;
 23     left:41px; top:25px;
 24 }
 25 #popup.show{
 26 /* 显示提示框的边框 */    
 27     border:1px solid #004a7e;
 28 }
 29 #popup.hide{
 30 /* 隐藏提示框的边框 */
 31     border:none;
 32 }
 33 /* 提示框的样式风格 */
 34 ul{
 35     list-style:none;
 36     margin:0px; padding:0px;
 37 }
 38 li.mouseOver{
 39     background-color:#004a7e;
 40     color:#FFFFFF;
 41 }
 42 li.mouseOut{
 43     background-color:#FFFFFF;
 44     color:#004a7e;
 45 }
 46 -->
 47 </style>
 48 <script language="javascript">
 49 var oInputField;    //考虑到很多函数中都要使用
 50 var oPopDiv;        //因此采用全局变量的形式
 51 var oColorsUl;
 52 var aColors = ["red","green","blue","magenta","mediumvioletred","oldlace","maroom","goldenrod","wheat","whitesmoke","moccasin","mistyrose","mintcream","midnightblue","seagreen","sandybrown","gold","mediumturquoise","navy","mediumspringgreen","mediumseagreen","mediumpurpul","peru","mediumorchid","mediumblue","hotpink","greenyellow","lemonchiffon","lawngreen","deepskyblue","honeydew","golenrod","forestgreen","gostwhite","gainsboro","firebrick","dodgerblue","darkturquoise","darkslateblue","darkslategray","darkseagreen","darkred","darkorchid","darkorenge","darkviolet","floralwhite","darkgoldenrod","darkblue","darkcyan","darkgreen"];
 53 aColors.sort();    //按字母排序，使显示结果更友好
 54 function initVars(){
 55 //初始化变量
 56     oInputField = document.forms["myForm1"].colors;
 57 //得到div标记的引用
 58     oPopDiv = document.getElementById("popup");
 59 //得到选择ul标记的引用
 60     oColorsUl = document.getElementById("colors_ul");
 61 }
 62 function clearColors(){
 63 //清除提示内容   每次输入新的字符时要重新开始计数
 64 for(var i=oColorsUl.childNodes.length-1;i>=0;i--)
 65         oColorsUl.removeChild(oColorsUl.childNodes[i]);
 66 //利用CSS标记来显示隐藏段区域
 67     oPopDiv.className = "hide";
 68 }
 69 function setColors(the_colors){
 70 //显示提示框，传入的参数即为匹配出来的结果组成的数组
 71     clearColors();    //每输入一个字母就先清除原先的提示，再继续
 72     oPopDiv.className = "show";
 73 var oLi;
 74 for(var i=0;i<the_colors.length;i++){
 75 //将匹配的提示结果逐一显示给用户
 76 //创建一个选择框
 77         oLi = document.createElement("li");
 78 //加到ul标记上
 79         oColorsUl.appendChild(oLi);
 80 //创建文本区域
 81         oLi.appendChild(document.createTextNode(the_colors[i]));
 82 
 83         oLi.onmouseover = function(){
 84 this.className = "mouseOver";    //鼠标经过时高亮
 85         }
 86         oLi.onmouseout = function(){
 87 this.className = "mouseOut";    //离开时恢复原样
 88         }
 89         oLi.onclick = function(){
 90 //用户点击某个匹配项时，设置输入框为该项的值
 91             oInputField.value = this.firstChild.nodeValue;
 92             clearColors();    //同时清除提示框
 93         }
 94     }
 95 }
 96 function findColors(){
 97     initVars();        //初始化变量
 98 if(oInputField.value.length > 0){
 99 var aResult = new Array();        //用于存放匹配结果
100 for(var i=0;i<aColors.length;i++)    //从颜色表中找匹配的颜色
101 //必须是从单词的开始处匹配
102 if(aColors[i].indexOf(oInputField.value) == 0)
103                 aResult.push(aColors[i]);    //压入结果
104 if(aResult.length>0)    //如果有匹配的颜色则显示出来
105             setColors(aResult);
106 else//否则清除，用户多输入一个字母
107             clearColors();        //就有可能从有匹配到无，到无的时候需要清除
108     }        
109 else
110         clearColors();    //无输入时清除提示框（例如用户按del键）
111 }
112 </script>
113 </head>
114 <body>
115 <form method="post" name="myForm1">
116 Color: <input type="text" name="colors" id="colors" onkeyup="findColors();" />
117 </form>
118 <div id="popup">
119     <ul id="colors_ul"></ul>
120 </div>
121 </body>
122 </html>

　　

posted @ 2012-03-17 21:44  半个灵魂  Views(199)  Comments(0)    收藏  举报