[1].[代码] [C#]代码 跳至 [1] [2] [3] [4]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
<!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 + "×tamp="
+ 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> |
[2].[代码] [C#]代码 跳至 [1] [2] [3] [4]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<%@
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); %> |
[3].[代码] [C#]代码 跳至 [1] [2] [3] [4]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
<!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> |
[4].[代码] [C#]代码 跳至 [1] [2] [3] [4]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<%@
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); %>
参考网址:http://www.oschina.net/code/snippet_119226_6201 |