|
在文本框输入一个字符，自动提示功能。类似百度啥的 如图：
Code:
<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <title>自动提示的文本框</title> <style> <!-- body{ font-size:12px; padding:0px; margin:5px; } form{padding:0px; margin:0px;} input{ /*用户输入框的样式*/ font-size:12px; border:1xp solid #000000; width:200px; padding:1px; margin:0px; } #popup{ /*提示框div块的样式*/ position:absolute;width:202px; color:#004a7e;font-size:12px; 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; } --> </style> <script language="javascript"> var oInputField; //考虑到很多函数中都要使用 var oPopDiv; //因此采用全局变量的形式 var oColorsUl; var aColors=["red","purple","black","white","orange","yellow","green",
"syan","blue","fuchsia","pink","tan","gray","brown","maroon","olive",
"navy","teal","aqua","lime","silver","blueviolet","crimson","cyan",
"gold","khaki","forestgreen","goldenrod","lightcoral","lightblue",
"lightslategray","tan","orchid","plum","deeppink","darkred"];
aColors.sort(); //按字母排序，使显示结果更友好 function initVars(){ //初始化变量 oInputField=document.forms["myForm1"].colors; oPopDiv=document.getElementById("popup"); oColorsUl=document.getElementById("colors_ul"); } function clearColors(){ //清除提示内容 for(var i=oColorsUl.childNodes.length-1;i>=0;i--){ oColorsUl.removeChild(oColorsUl.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.onmousemove=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();//无输入时清除提示框（例如用户按del键） } </script> </head> <body> <form method="post" name="myForm1" action=""> Color:<input type="text" name="colors" id="colors" onKeyUp="findColors();" /> </form> <div id="popup"> <ul id="colors_ul"></ul> </div> </body> </html> |
