jQuery做个TextBox自动完成条

      刚开始学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文档内容都是随机产生的：所以下面的效果显示的结果都是随机生成的；不说了。来个图例：

作者：破  狼 
出处：http://www.cnblogs.com/whitewolf/ 
本文版权归作者，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。该文章也同时发布在我的独立博客中-个人独立博客、博客园--破狼和51CTO--破狼。http://www.cnblogs.com/whitewolf/archive/2009/07/25/1531039.html

时间： 2024-08-30 10:48:24

jQuery做个TextBox自动完成条的相关文章

手把手教你用jQuery做动画插件

CSS样式属性动画 我们现在有很多的动画方法,滑动.淡出淡入.还有其他的显示隐藏动画,但是我们对于精确的控制动画以及动画到底怎么发生的还不太了解.我们这就来介绍一个非常强大的jQuery函数,animate,这个方法可以让你对任何的CSS属性做动画的效果.我们看看代码: $("p").animate({        padding:"20px",        fontSize:"30px"  },2000)  这段代码会动画操作所有的,将他们

jquery css实现邮箱自动补全_jquery

 今天在公司做一个电子商务网站的注册会员时,要求用户在电子邮箱文本框中输入时,给与热点提示常用的电子邮箱,帮助用户选择,提高体验效果.下面是用Jquery+css实现的邮箱自动补全,供大家参考和学习. HTML代码:emailAutoComple.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>邮箱自动补全&

用jQuery实现的购物车自动结算付款金额的实例源

jQuery实现购物车表单自动结算,用户把所购商品的数量输入进去,就可以自动计算出商品总额,金额+运费,类似淘宝的购物车结算功能,计算过程是适时的,用jquery实现了Ajax不刷新网页就计算的功能,做购物类网站的或许可以用上这个例子. 运行效果截图如下: 全部源代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht

jQuery实现tab标签自动切换的方法

 这篇文章主要介绍了jQuery实现tab标签自动切换的方法,实例分析了jQuery操作tab标签的技巧,涉及addClass.siblings及removeClass链式操作的技巧,需要的朋友可以参考下     本文实例讲述了jQuery实现tab标签自动切换的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww

jQuery实现搜索关键字自动匹配提示方法

在现在的Web设计中,提高用户体验是企业最为注重的内容之一.在搜索表单中,根据输入的部分内容进行关键字匹配提示功能,就是最直观和常用的交互体验,类似功能已经被多数的互联网网站应用.例如Google的搜索框效果如下: 这里介绍一个jQuery实现搜索关键字自动匹配提示方法.jQuery AutoComplete 是一个基于jQuery实现搜索关键字自动匹配提示的插件,该插件可扩展性强,表现性能优越,方便整合到自己的项目中使用:兼容IE 6.0+, FF 2+, Safari 2.0+, Opera

jQuery实现根据类型自动显示和隐藏表单

 这篇文章主要给大家分享了jQuery实现根据类型自动显示和隐藏表单的代码,非常的简单实用,仅仅10行代码,推荐给大家,希望能给大家一些提示.     jquery实现表单根据单选按钮进行字段的动画切换,昨天写的,感觉比起初学时写的js/jquery有了很大进步..在最大化扩展性的情况下经可能使代码精简. html   代码如下: <div class="control-group"> <label class="control-label">

Jquery Uploadify上传带进度条介绍

 本篇文章主要是对Jquery Uploadify上传带进度条的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助  代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs" Inherits="UploadifyDemo_UpLoad" %>   <html xmlns="http://

jquery做的一个简单的屏幕锁定提示框

 这篇文章主要介绍了使用jquery做的一个简单的屏幕锁定提示框,需要的朋友可以参考下 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"&

jquery实现简单的自动播放幻灯片效果_jquery

本文实例讲述了jquery实现简单的自动播放幻灯片效果.分享给大家供大家参考.具体实现方法如下: html部分: <div id="slideshow"> <div> <img src="images/5224/5658667829_2bb7d42a9c_m.jpg"> </div> <div> <img src="images/5230/5638093881_a791e4f819_m.jp