ASP.NET输入文本框自动提示功能

在ASP.NET Web开发中会经常用到自动提示功能，比如百度搜索。我们只要输入相应的关键字，就可以自动得到相似搜索关键字的提示，方便我们快速的输入关键字进行查询。

那么在ASP.Net中，如果我们需要做个类似的效果，该如何做到呢？

很简单，我们只要借助于一个jQuery强大的插件JQuery AutoComplete来完成这个效果就可以了。这个插件的官方地址为：JQuery AutoComplete，里面也有示例代码。

下面我们将以一个身份证号自动查询为例，来看看JQuery AutoComplete的强大和简洁。

首先我们要准备好插件，可以在官方下面下载下来。

一、aspx页面

在head部分，导入相应js和css。

[html]  view plain  copy

 

1. <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>  
2.   
3. <link href="../js/jquery.autocomplete.css" rel="stylesheet" type="text/css" />  
4.   
5. <script src="../js/jquery.autocomplete.js" type="text/javascript"></script>  

注意jquery-1.4.2.js一定要在最上面，因为autocomplete插件基于核心jquery.js。至于jquery的版本，读者可以自行下载最新版。

然后继续写上核心js部分。

[javascript]  view plain  copy

 

1. <script type="text/javascript">  
2.     $(function(){  
3.         $("#<%=txtSfzh.ClientID %>").autocomplete("../services/SearchSyryInfoService.ashx",{  
4.             width: 500,  
5.             max: 20,  
6.             delay: 5,  
7.             cacheLength: 1,  
8.             formatItem: function(data, i, max) {  
9.                 return data.toString();  
10.             },  
11.             formatResult: function(data) {  
12.                 return data.toString().split(",")[1];  
13.             }  
14.         }).result(function(event, data, formatted) {  
15.             var array = data.toString().split(",");  
16.             $("#<%=txtXm.ClientID %>").val(array[0]);//姓名  
17.             $("#<%=txtSfzh.ClientID %>").val(array[1]);//身份证号  
18.             $("#<%=txtJtzz.ClientID %>").val(array[2]);//家庭住址  
19.             $("#<%=txtLxdh.ClientID %>").val(array[3]);//联系电话  
20.         });  
21.     });  
22. </script>  

在body的页面部分准备一个页面：

[html]  view plain  copy

 

1. <table cellpadding="0" cellspacing="0" border="1" width="100%">  
2.             <tr>  
3.                 <td>  
4.                     <label>  
5.                         身份证号</label>  
6.                 </td>  
7.                 <td>  
8.                     <asp:TextBox runat="server" ID="txtSfzh" />  
9.                 </td>  
10.                 <td>  
11.                     <label>  
12.                         姓名</label>  
13.                 </td>  
14.                 <td>  
15.                     <asp:TextBox runat="server" ID="txtXm" />  
16.                 </td>  
17.             </tr>  
18.             <tr>  
19.                 <td>  
20.                     <label>  
21.                         家庭地址</label>  
22.                 </td>  
23.                 <td>  
24.                     <asp:TextBox runat="server" ID="txtJtzz" />  
25.                 </td>  
26.                 <td>  
27.                     <label>  
28.                         联系电话</label>  
29.                 </td>  
30.                 <td>  
31.                     <asp:TextBox runat="server" ID="txtLxdh" />  
32.                 </td>  
33.             </tr>  
34.             <tr align="center">  
35.                 <td colspan="4">  
36.                     <asp:Button ID="btnSearch" runat="server" Text="查询" Width="80px" OnClick="btnSearch_Click" />   
37.                     <asp:Button ID="btnReset" runat="server" Text="重置" Width="80px" OnClick="btnReset_Click" />  
38.                 </td>  
39.             </tr>  
40.         </table>  

二、ashx后台

[csharp]  view plain  copy

 

1. public void ProcessRequest(HttpContext context)  
2.     {  
3.         context.Response.ContentType = "text/plain";  
4.   
5.         if (context.Request.QueryString["q"] != null)  
6.         {  
7.             string key = context.Request.QueryString["q"];  
8.             if (key.Trim().Length >= 8)//大于等于8位，才去查数据库。这是为了缓解数据库查询的压力，只当输入了8位以上身份证以后才进行数据库检索。  
9.             {  
10.                 string keyValues = GetKeyValues(key);  
11.                 context.Response.Write(keyValues);  
12.             }  
13.         }  
14.     }  
15.   
16.     public bool IsReusable  
17.     {  
18.         get  
19.         {  
20.             return false;  
21.         }  
22.     }  
23.   
24.     public static string GetKeyValues(string key)  
25.     {  
26.         BLL bll = new BLL();  
27.         DataTable dt = bll.GetPersons(key).Tables[0];//通过关键字k（k是前台页面输入的身份证号码）到后台去查询人员信息并返回一个结果集  
28.         StringBuilder sb = new StringBuilder();  
29.         foreach (DataRow dr in dt.Rows)  
30.         {  
31.             sb.Append(dr["result"].ToString() + "\n");  
32.         }  
33.         return sb.ToString().Trim();  
34.     }  

如上代码即可实现输入身份证号时自动检索数据库并给出相关信息，当选择某条数据的时候，自动给文本框赋值，减少了人工的输入。

鉴于信息保密，这里就不上传效果图了，读者可以自己动手试一试。