jQuery做个TextBox自动完成条
2009-07-25 20:40 破狼 阅读(1568) 评论(4) 编辑 收藏 举报刚开始学jQuery，于是想试试学习效果，所以就做了个这个TextBox自动完成条，练习练习。请牛人们别笑话。
代码如下：
Code1
<%@ 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
.mouseEnter153
{154
background-color: Yellow;155
}156
157
--></mce:style><style type="text/css" mce_bogus="1"> .mouseEnter158
{159
background-color: Yellow;160
}161
162
--></mce:style><style type="text/css" mce_bogus="1"> .mouseEnter163
{164
background-color: Yellow;165
}166
167
--></mce:style><style type="text/css" mce_bogus="1"> .mouseEnter168
{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
292
Ajax调用的一般处理程序为：293
294
view plaincopy to clipboardprint?295
<%@ WebHandler Language="C#" Class="Suggest" %> 296
297
using System; 298
using System.Web; 299
using System.Linq; 300
using System.Xml; 301
using System.Xml.Linq; 302
303
public 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
352
using System;353
using System.Web;354
using System.Linq;355
using System.Xml;356
using System.Xml.Linq;357
358
public class Suggest : IHttpHandler359
{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 IsReusable374
{375
get376
{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文档内容都是随机产生的：所以下面的效果显示的结果都是随机生成的；不说了。来个图例：
作者：破 狼
出处：http://www.cnblogs.com/whitewolf/
本文版权归作者，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。该文章也同时发布在我的独立博客中-个人独立博客、博客园--破狼和51CTO--破狼。
