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

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

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

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

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

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

一、aspx页面

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

    <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>

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

    <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>

    <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>

    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();
        }

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