刚开始学jQuery，于是想试试学习效果，所以就做了个这个TextBox自动完成条，练习练习。请牛人们别笑话。
代码如下：
1
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
2
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4<html xmlns="http://www.w3.org/1999/xhtml">
5<head runat="server">
6 <title>无标题页</title>
7 <mce:style type="text/css"><!--
8 .mouseEnter
9 {
10
background-color: Yellow;
11
}
12
13--></mce:style><style type="text/css" mce_bogus="1"> .mouseEnter
14 {
15 background-color: Yellow;
16 }
17
18--></mce:style><style type="text/css" mce_bogus="1"> .mouseEnter
19 {
20 background-color: Yellow;
21 }
22
23--></mce:style><style type="text/css" mce_bogus="1"> .mouseEnter
24 {
25 background-color: Yellow;
26 }
27 </style>
28 <mce:script type="text/javascript" src="SCRIPT/jquery-1.3.2-vsdoc2.js" mce_src="SCRIPT/jquery-1.3.2-vsdoc2.js"><!--
29</mce:script>
30 <script type="text/javascript"><!--
31
32 $(function(){
33 $("#result").css("position","absolute");
34 var offset =$("#TextBox1").offset();
35
$("#result").css({left: offset.left +"px",top: offset.top + $("#TextBox1").height() + "px"});
36
37 });
38// --></mce:script>
39</head>
40<body >
41 <form id="form1" runat="server" onsubmit="alert($('#TextBox1').val());">
42 <center><asp:TextBox ID="TextBox1" runat="server" width="137px" ></asp:TextBox></center>
43 <div id="result" style="width: 147px;">
44 <table style="width: 100%; border-style: none solid solid solid; border-width: 1px;
45 border-color: #00FF00">
46 <tbody id="mytable">
47 </tbody>
48 </table>
49 </div>
50 </form>
51 <mce:script type="text/javascript"><!--
52 var size = 0; //每次真实取到的数据条目数（最大10）
53 var index = -1 ;//计算keydown事件：td索引；
54
55 function setTdEvent(){//为生成的TD设置事件
56 //点击效果
57 $("#mytable>tr>td").click(function(){
58 $("#TextBox1").val($(this).text());
59
});
60 //选择高亮效果
61 $("#mytable>tr >td").hover(function(){
62 $(this).addClass("mouseEnter");
63 },function(){
64 $(this).removeClass("mouseEnter");
65 });
66 }
67
68
69 function setTD(text){
70 //$("tr:even").css("backgroundColor","blue");
71 return "<tr><td style='border: 0px none #FFFFFF;width:100%'>" + text + "</td></tr>";
72 }
73
74 function setTable(msg)
75 {
76 var tbody = $("#mytable");
77 var texts = msg.split(";");
78 var str ="";
79 size = texts.length;
80 for(var i=0;i<texts.length;i++)
81 {
82 str += setTD(texts[i]);
83 }
84 tbody.html(str);
85 setTdEvent()
86 $("#div1").show("fast");
87 }
88
89 function setKeyDown(str)
90 {
91 $("#mytable>tr>td:eq(" + index + ")").removeClass("mouseEnter");
92 if(str == "+")
93 {
94
95 index = (++index) % size;
96 }
97 else if("-")
98 {
99 index =(--index + size) % size;
100 }
101 try{
102 $("#mytable>tr>td:eq(" + index + ")").addClass("mouseEnter");
103 }catch(e){
104 alert(e);
105 }
106
107 }
108
109 $(function(){
110
111 $("#TextBox1").bind("propertychange",function(){
112 $("#div1").hide("fast").html("");
113 index = -1;
114 $.ajax({
115 type: "POST",
116 url: "Suggest.ashx",
117 data: "word="+$("#TextBox1").val()+"&time="+new Date().toLocaleTimeString(),
118 success: function(msg){
119 setTable( msg );
120 }
121 });
122 });
123
124 $("#TextBox1").bind("keydown",function(event){
125 if( event.keyCode == 38 )
126 {
127
128 setKeyDown("-");
129 }
130 else if(event.keyCode == 40)
131 {
132 setKeyDown("+");
133 }
134 else if(event.keyCode == 13 && index != -1)
135 {
136
137 $("#TextBox1").val( $("#mytable>tr>td:eq(" + index + ")").text());
138 }
139 });
140
141 });
142// --></mce:script>
143</body>
144</html>
145<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
146
147<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
148<html xmlns="http://www.w3.org/1999/xhtml">
149<head runat="server">
150 <title>无标题页</title>
151 <mce:style type="text/css"><!--
152 .mouseEnter
153 {
154 background-color: Yellow;
155 }
156
157--></mce:style><style type="text/css" mce_bogus="1"> .mouseEnter
158 {
159 background-color: Yellow;
160 }
161
162--></mce:style><style type="text/css" mce_bogus="1"> .mouseEnter
163 {
164 background-color: Yellow;
165 }
166
167--></mce:style><style type="text/css" mce_bogus="1"> .mouseEnter
168 {
169 background-color: Yellow;
170 }
171 </style>
172 <mce:script type="text/javascript" src="SCRIPT/jquery-1.3.2-vsdoc2.js" mce_src="SCRIPT/jquery-1.3.2-vsdoc2.js"><!--
173</mce:script>
174 <script type="text/javascript"><!--
175
176 $(function(){
177 $("#result").css("position","absolute");
178 var offset =$("#TextBox1").offset();
179 $("#result").css({left: offset.left +"px",top: offset.top + $("#TextBox1").height() + "px"});
180
181 });
182// --></mce:script>
183</head>
184<body >
185 <form id="form1" runat="server" onsubmit="alert($('#TextBox1').val());">
186 <center><asp:TextBox ID="TextBox1" runat="server" width="137px" ></asp:TextBox></center>
187 <div id="result" style="width: 147px;">
188 <table style="width: 100%; border-style: none solid solid solid; border-width: 1px;
189 border-color: #00FF00">
190 <tbody id="mytable">
191 </tbody>
192 </table>
193 </div>
194 </form>
195 <mce:script type="text/javascript"><!--
196 var size = 0; //每次真实取到的数据条目数（最大10）
197 var index = -1 ;//计算keydown事件：td索引；
198
199 function setTdEvent(){//为生成的TD设置事件
200 //点击效果
201 $("#mytable>tr>td").click(function(){
202 $("#TextBox1").val($(this).text());
203 });
204 //选择高亮效果
205 $("#mytable>tr >td").hover(function(){
206 $(this).addClass("mouseEnter");
207 },function(){
208 $(this).removeClass("mouseEnter");
209 });
210 }
211
212
213 function setTD(text){
214 //$("tr:even").css("backgroundColor","blue");
215 return "<tr><td style='border: 0px none #FFFFFF;width:100%'>" + text + "</td></tr>";
216 }
217
218 function setTable(msg)
219 {
220 var tbody = $("#mytable");
221 var texts = msg.split(";");
222 var str ="";
223 size = texts.length;
224 for(var i=0;i<texts.length;i++)
225 {
226 str += setTD(texts[i]);
227 }
228 tbody.html(str);
229 setTdEvent()
230 $("#div1").show("fast");
231 }
232
233 function setKeyDown(str)
234 {
235 $("#mytable>tr>td:eq(" + index + ")").removeClass("mouseEnter");
236 if(str == "+")
237 {
238
239 index = (++index) % size;
240 }
241 else if("-")
242 {
243 index =(--index + size) % size;
244 }
245 try{
246 $("#mytable>tr>td:eq(" + index + ")").addClass("mouseEnter");
247 }catch(e){
248 alert(e);
249 }
250
251 }
252
253 $(function(){
254
255 $("#TextBox1").bind("propertychange",function(){
256 $("#div1").hide("fast").html("");
257 index = -1;
258 $.ajax({
259 type: "POST",
260 url: "Suggest.ashx",
261 data: "word="+$("#TextBox1").val()+"&time="+new Date().toLocaleTimeString(),
262 success: function(msg){
263 setTable( msg );
264 }
265 });
266 });
267
268 $("#TextBox1").bind("keydown",function(event){
269 if( event.keyCode == 38 )
270 {
271
272 setKeyDown("-");
273 }
274 else if(event.keyCode == 40)
275 {
276 setKeyDown("+");
277 }
278 else if(event.keyCode == 13 && index != -1)
279 {
280
281 $("#TextBox1").val( $("#mytable>tr>td:eq(" + index + ")").text());
282 }
283 });
284
285 });
286// --></mce:script>
287</body>
288</html>
289
290
291
292Ajax调用的一般处理程序为：
293
294 view plaincopy to clipboardprint?
295<%@ WebHandler Language="C#" Class="Suggest" %>
296
297using System;
298using System.Web;
299using System.Linq;
300using System.Xml;
301using System.Xml.Linq;
302
303public class Suggest : IHttpHandler
304{
305
306 public void ProcessRequest(HttpContext context)
307 {
308 HttpResponse Response = context.Response;
309 Response.Charset = "gb2312";
310 Response.ContentEncoding = System.Text.Encoding.UTF8;
311 Response.ContentType = "text/plain";
312 Response.StatusCode = 200;
313 string start = context.Request.Params["word"].ToString();
314 Response.Write(GetSuggest(start));
315 Response.Flush();
316 }
317
318 public bool IsReusable
319 {
320 get
321 {
322 return false;
323 }
324 }
325
326 /// <summary>
327 /// 获取响应字符串
328 /// </summary>
329 /// <param name="start">查询起始字符串</param>
330 /// <returns>响应字符串</returns>
331 private string GetSuggest(string start)
332 {
333 XElement root = XElement.Load(AppDomain.CurrentDomain.SetupInformation.ApplicationBase + "Suggest.xml");
334 System.Collections.Generic.IEnumerable<string>
335 q = (from r in root.Elements()
336 where (r.Name).ToString().ToLower().StartsWith(start.ToLower())
337 select r.Name.ToString()).Take(5);
338 System.Text.StringBuilder sb = new System.Text.StringBuilder();
339 foreach (string w in q)
340 {
341 sb.Append(w + ";");
342 }
343 if (sb.Length != 0)
344 sb.Remove(sb.Length - 1, 1);
345 return sb.ToString();
346 }
347
348
349}
350<%@ WebHandler Language="C#" Class="Suggest" %>
351
352using System;
353using System.Web;
354using System.Linq;
355using System.Xml;
356using System.Xml.Linq;
357
358public class Suggest : IHttpHandler
359{
360
361 public void ProcessRequest(HttpContext context)
362 {
363 HttpResponse Response = context.Response;
364 Response.Charset = "gb2312";
365 Response.ContentEncoding = System.Text.Encoding.UTF8;
366 Response.ContentType = "text/plain";
367 Response.StatusCode = 200;
368 string start = context.Request.Params["word"].ToString();
369 Response.Write(GetSuggest(start));
370 Response.Flush();
371 }
372
373 public bool IsReusable
374 {
375 get
376 {
377 return false;
378 }
379 }
380
381 /// <summary>
382 /// 获取响应字符串
383 /// </summary>
384 /// <param name="start">查询起始字符串</param>
385 /// <returns>响应字符串</returns>
386 private string GetSuggest(string start)
387 {
388 XElement root = XElement.Load(AppDomain.CurrentDomain.SetupInformation.ApplicationBase + "Suggest.xml");
389 System.Collections.Generic.IEnumerable<string>
390 q = (from r in root.Elements()
391 where (r.Name).ToString().ToLower().StartsWith(start.ToLower())
392 select r.Name.ToString()).Take(5);
393 System.Text.StringBuilder sb = new System.Text.StringBuilder();
394 foreach (string w in q)
395 {
396 sb.Append(w + ";");
397 }
398 if (sb.Length != 0)
399 sb.Remove(sb.Length - 1, 1);
400 return sb.ToString();
401 }
402
403
404}
405
其中xml文档其实也不是什么标准的xml文档，就是拿来存储数据，练习练习刚学的Linq to XML。由于不想建表，本人也许有点懒惰吧，xml文档内容都是随机产生的：所以下面的效果显示的结果都是随机生成的；不说了。来个图例：
