刚开始学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文档内容都是随机产生的：所以下面的效果显示的结果都是随机生成的；不说了。来个图例：
本文转自 破狼 51CTO博客，原文链接：http://blog.51cto.com/whitewolfblog/832634，如需转载请自行联系原作者