本例以颜色为例，为用户提供自动提示，展示效果和运行结果如图：
1、建立框架结构：
复制代码 代码如下:
2、页面和表单CSS：
复制代码 代码如下:
3、实现JS匹配用户输入：
复制代码 代码如下:
<script language="javascript"> <br>var oInputField; //考虑到很多函数中都要使用 <br>var oPopDiv; //因此采用全局变量的形式 <br>var oColorsUl; <br>var aColors = ["red","green","blue","magenta","yellow",……"ivory","darkmagenta","cornfloewrblue"]; <br>aColors.sort(); //按字母排序，使显示结果更友好 <br>function initVars(){ oInputField = document.forms["myForm1"].colors; <br>oPopDiv = document.getElementByIdx_x("popup"); <br>oColorsUl = document.getElementByIdx_x("colors_ul"); function clearColors(){ for(var i=oColorsUl.childNodes.length-1;i>=0;i--) <br>oColorsUl.removeChild(oColorsUl.childNodes[i]); <br>oPopDiv.className = "hide"; function setColors(the_colors){ clearColors(); //每输入一个字母就先清除原先的提示，再继续 <br>oPopDiv.className = "show"; <br>var oLi; <br>for(var i=0;i<the_colors.length;i++){ oLi = document.createElement_x("li"); <br>oColorsUl.appendChild(oLi); <br>oLi.appendChild(document.createTextNode(the_colors[i])); <br>oLi. = function(){ <br>this.className = "mouseOver"; //鼠标经过时高亮 oLi. = function(){ <br>this.className = "mouseOut"; //离开时恢复原样 oLi.onclick = function(){ oInputField.value = this.firstChild.nodeValue; <br>clearColors(); //同时清除提示框 } function findColors(){ <br>initVars(); //初始化变量 <br>if(oInputField.value.length > 0){ <br>var aResult = new Array(); //用于存放匹配结果 <br>for(var i=0;i<aColors.length;i++) //从颜色表中找匹配的颜色 if(aColors[i].indexOf(oInputField.value) == 0) <br>aResult.push(aColors[i]); //压入结果 <br>if(aResult.length>0) //如果有匹配的颜色则显示出来 <br>setColors(aResult); <br>else //否则清除，用户多输入一个字母 <br>clearColors(); //就有可能从有匹配到无，到无的时候需要清除 else <br>clearColors(); //无输入时清除提示框（例如用户按del键） <br></script>
文本框输入提示/自动完成的Js代码
文本框输入自动匹配或提示的功能，输入内容，自动匹配对应数据，可用上下键控制选项、按回车键选择，也可以直接用鼠标选择。代码：建立实例，第一个参数是实例对象的名称，第二个是最多显示的数量。
立即学习“Java免费学习笔记（深入）”；
