JavaScript 制作带自动提示的文本框

示例一：直接编写AJAX 实现。

客户端：

9-10.html

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html >
< head >
< title >Ajax实现自动提示的文本框 </ title >
< style >
< !--
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 ;
width : 200px ; padding : 1px ; margin : 0px ;
}
#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 ;
}
-->
</ style >
< script language ="javascript" >
var oInputField; // 考虑到很多函数中都要使用
var oPopDiv; // 因此采用全局变量的形式
var oColorsUl;
var xmlHttp;
function createXMLHttpRequest(){
if (window.ActiveXObject)
xmlHttp = new ActiveXObject( " Microsoft.XMLHTTP " );
else if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
}
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.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 ){
createXMLHttpRequest(); // 将用户输入发送给服务器
var sUrl = " 9-10.aspx?sColor= " + oInputField.value + " &timestamp= " + new Date().getTime();
xmlHttp.open( " GET " ,sUrl, true );
xmlHttp.onreadystatechange = function (){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200 ){
var aResult = new Array();
if (xmlHttp.responseText.length){
aResult = xmlHttp.responseText.split( " , " );
setColors(aResult); // 显示服务器结果
}
else
clearColors();
}
}
xmlHttp.send( null );
}
else
clearColors(); // 无输入时清除提示框（例如用户按del键）
}
</ script >
</ head >
< body >
< form method ="post" name ="myForm1" >
Color: < input type ="text" name ="colors" id ="colors" onkeyup ="findColors();" />
</ form >
< div id ="popup" >
< ul id ="colors_ul" ></ ul >
</ div >
</ body >
</ html >

服务器端（9-10.aspx ）：

9-10.aspx

<% @ Page Language = " C# " ContentType = " text/html " ResponseEncoding = " gb2312 " %>
<% @ Import Namespace = " System.Data " %>
<%
Response.CacheControl = " no-cache " ;
Response.AddHeader( " Pragma " , " no-cache " );
string sInput = Request[ " sColor " ].Trim();
if (sInput.Length == 0 )
return;
string sResult = "" ;

string [] aColors = new string []{ " aliceblue " , " antiquewith " , " aquamarine " , " azure " , " beige " , " bisque " , " black " , " blanchedalmond " , " blue " , " blueviolet " , " brass " , " bronze " , " brown " , " burlywood " , " cadetblue " , " chartreuse " , " chocolate " , " copper " , " coral " , " cornfloewrblue " , " cornsilk " , " cyan " , " darkblue " , " darkcyan " , " darkgoldenrod " , " darkgray " , " darkgreen " , " darkhaki " , " darkmagenta " , " darkolivegreen " , " darkorchid " , " darkorenge " , " darkred " , " darksalmon " , " darkseagreen " , " darkslateblue " , " darkslategray " , " darkturquoise " , " darkviolet " , " deeppink " , " deepskyblue " , " dimgray " , " dodgerblue " , " feldspar " , " firebrick " , " floralwhite " , " forestgreen " , " fuchsia " , " gainsboro " , " gold " , " goldenrod " , " golenrod " , " gostwhite " , " gray " , " green " , " greenyellow " , " honeydew " , " hotpink " , " indianred " , " inen " , " ivory " , " khaki " , " lavender " , " lavenderblush " , " lawngreen " , " lemonchiffon " , " lightblue " , " lightcoral " , " lightcyan " , " lightgodenrod " , " lightgodenrodyellow " , " lightgray " , " lightgreen " , " lightpink " , " lightsalmon " , " lightseagreen " , " lightskyblue " , " lightslateblue " , " lightslategray " , " lightsteelblue " , " lightyellow " , " lime " , " limegreen " , " magenta " , " magenta " , " maroom " , " maroon " , " mediumaquamarine " , " mediumblue " , " mediumorchid " , " mediumpurpul " , " mediumseagreen " , " mediumslateblue " , " mediumspringgreen " , " mediumturquoise " , " mediumvioletred " , " midnightblue " , " mintcream " , " mistyrose " , " moccasin " , " navajowhite " , " navy " , " navyblue " , " oldlace " , " olivedrab " , " orange " , " orchid " , " orengered " , " palegodenrod " , " palegreen " , " paleturquoise " , " palevioletred " , " papayawhip " , " peachpuff " , " peru " , " pink " , " plum " , " powderblue " , " purple " , " quartz " , " red " , " rosybrown " , " royalblue " , " saddlebrown " , " salmon " , " sandybrown " , " scarlet " , " seagreen " , " seashell " , " sienna " , " silver " , " skyblue " , " slategray " , " snow " , " springgreen " , " steelblue " , " tan " , " thistle " , " tomato " , " turquoise " , " violet " , " violetred " , " wheat " , " whitesmoke " , " yellow " , " yellowgreen " };

for ( int i = 0 ;i < aColors.Length;i ++ ){
if (aColors[i].IndexOf(sInput) == 0 )
sResult += aColors[i] + " , " ;
}
if (sResult.Length > 0 ) // 如果有匹配项
sResult = sResult.Substring( 0 ,sResult.Length - 1 ); // 去掉最后的“,”号
Response.Write(sResult);
%>

示例二：使用jQuery 实现。

客户端：

14-10.html

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html >
< head >
< title >jQuery实现自动提示的文本框 </ title >
< style >
< !--
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 ;
width : 200px ; padding : 1px ; margin : 0px ;
}
#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 ;
}
/* 提示框的样式风格 */
ul {
list-style : none ;
margin : 0px ; padding : 0px ;
color : #004a7e ;
}
li.mouseOver {
background-color : #004a7e ;
color : #FFFFFF ;
}
-->
</ style >
< script language ="javascript" src ="jquery.min.js" ></ script >
< script language ="javascript" >
var oInputField; // 考虑到很多函数中都要使用
var oPopDiv; // 因此采用全局变量的形式
var oColorsUl;
function initVars(){
// 初始化变量
oInputField = $( " #colors " );
oPopDiv = $( " #popup " );
oColorsUl = $( " #colors_ul " );
}
function clearColors(){
// 清除提示内容
oColorsUl.empty();
oPopDiv.removeClass( " show " );
}
function setColors(the_colors){
// 显示提示框，传入的参数即为匹配出来的结果组成的数组
clearColors(); // 每输入一个字母就先清除原先的提示，再继续
oPopDiv.addClass( " show " );
for ( var i = 0 ;i < the_colors.length;i ++ )
// 将匹配的提示结果逐一显示给用户
oColorsUl.append($( " <li> " + the_colors[i] + " </li> " ));
oColorsUl.find( " li " ).click( function (){
oInputField.val($( this ).text());
clearColors();
}).hover(
function (){$( this ).addClass( " mouseOver " );},
function (){$( this ).removeClass( " mouseOver " );}
);
}
function findColors(){
initVars(); // 初始化变量
if (oInputField.val().length > 0 ){
// 获取异步数据
$.get( " 14-10.aspx " ,{sColor:oInputField.val()},
function (data){
var aResult = new Array();
if (data.length > 0 ){
aResult = data.split( " , " );
setColors(aResult); // 显示服务器结果
}
else
clearColors();
});
}
else
clearColors(); // 无输入时清除提示框（例如用户按del键）
}
</ script >
</ head >
< body >
< form method ="post" name ="myForm1" >
Color: < input type ="text" name ="colors" id ="colors" onkeyup ="findColors();" />
</ form >
< div id ="popup" >
< ul id ="colors_ul" ></ ul >
</ div >
</ body >
</ html >

服务器端（14-10.aspx ）：

本文转自钢钢博客园博客，原文链接：http://www.cnblogs.com/xugang/archive/2010/08/07/1794705.html，如需转载请自行联系原作者