在ASP.NET Web开发中会经常用到自动提示功能，比如百度搜索。我们只要输入相应的关键字，就可以自动得到相似搜索关键字的提示，方便我们快速的输入关键字进行查询。
那么在ASP.NET中，如果我们需要做个类似的效果，该如何做到呢？
很简单，我们只要借助于一个JQuery强大的插件JQuery AutoComplete来完成这个效果就可以了。这个插件的官方地址为：JQuery AutoComplete，里面也有示例代码。
下面我们将以一个身份证号自动查询为例，来看看JQuery AutoComplete的强大和简洁。
首先我们要准备好插件，可以在官方下面下载下来。
一、aspx页面
在head部分，导入相应js和css。
|
1
2
3
4
5
|
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<link href="../js/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery.autocomplete.js" type="text/javascript"></script>
|
注意jquery-1.4.2.js一定要在最上面，因为autocomplete插件基于核心jquery.js。至于jquery的版本，读者可以自行下载最新版。
然后继续写上核心js部分。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<script type="text/javascript">
$(function(){
$("#<%=txtSfzh.ClientID %>").autocomplete("../services/SearchSyryInfoService.ashx",{
width: 500,
max: 20,
delay: 5,
cacheLength: 1,
formatItem: function(data, i, max) {
return data.toString();
},
formatResult: function(data) {
return data.toString().split(",")[1];
}
}).result(function(event, data, formatted) {
var array = data.toString().split(",");
$("#<%=txtXm.ClientID %>").val(array[0]);//姓名
$("#<%=txtSfzh.ClientID %>").val(array[1]);//身份证号
$("#<%=txtJtzz.ClientID %>").val(array[2]);//家庭住址
$("#<%=txtLxdh.ClientID %>").val(array[3]);//联系电话
});
});
</script>
|
在body的页面部分准备一个页面：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<table cellpadding="0" cellspacing="0" border="1" width="100%">
<tr>
<td>
<label>
身份证号</label>
</td>
<td>
<asp:TextBox runat="server" ID="txtSfzh" />
</td>
<td>
<label>
姓名</label>
</td>
<td>
<asp:TextBox runat="server" ID="txtXm" />
</td>
</tr>
<tr>
<td>
<label>
家庭地址</label>
</td>
<td>
<asp:TextBox runat="server" ID="txtJtzz" />
</td>
<td>
<label>
联系电话</label>
</td>
<td>
<asp:TextBox runat="server" ID="txtLxdh" />
</td>
</tr>
<tr align="center">
<td colspan="4">
<asp:Button ID="btnSearch" runat="server" Text="查询" Width="80px" OnClick="btnSearch_Click" />
<asp:Button ID="btnReset" runat="server" Text="重置" Width="80px" OnClick="btnReset_Click" />
</td>
</tr>
</table>
|
二、ashx后台
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
if (context.Request.QueryString["q"] != null)
{
string key = context.Request.QueryString["q"];
if (key.Trim().Length >= 8)//大于等于8位，才去查数据库。这是为了缓解数据库查询的压力，只当输入了8位以上身份证以后才进行数据库检索。
{
string keyValues = GetKeyValues(key);
context.Response.Write(keyValues);
}
}
}
public bool IsReusable
{
get
{
return false;
}
}
public static string GetKeyValues(string key)
{
BLL bll = new BLL();
DataTable dt = bll.GetPersons(key).Tables[0];//通过关键字k（k是前台页面输入的身份证号码）到后台去查询人员信息并返回一个结果集
StringBuilder sb = new StringBuilder();
foreach (DataRow dr in dt.Rows)
{
sb.Append(dr["result"].ToString() + "\n");
}
return sb.ToString().Trim();
}
|
如上代码即可实现输入身份证号时自动检索数据库并给出相关信息，当选择某条数据的时候，自动给文本框赋值，减少了人工的输入。
以上就是本文的全部内容，希望对大家的学习有所帮助。