在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();
}
|
如上代码即可实现输入身份证号时自动检索数据库并给出相关信息，当选择某条数据的时候，自动给文本框赋值，减少了人工的输入。
鉴于信息保密，这里就不上传效果图了，读者可以自己动手试一试。
本文转自 guwei4037 51CTO博客，原文链接:http://blog.51cto.com/csharper/1345987
