刚开始学jQuery,于是想试试学习效果,所以就做了个这个TextBox自动完成条,练习练习。请牛人们别笑话。

代码如下:

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

 

其中xml文档其实也不是什么标准的xml文档,就是拿来存储数据,练习练习刚学的Linq to XML。由于不想建表,本人也许有点懒惰吧,xml文档内容都是随机产生的:所以下面的效果显示的结果都是随机生成的;不说了。来个图例: