`
阿尔萨斯
  • 浏览: 4107977 次
社区版块
存档分类
最新评论

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

 
阅读更多

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


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

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

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

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

一、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>
注意jquery-1.4.2.js一定要在最上面,因为autocomplete插件基于核心jquery.js。至于jquery的版本,读者可以自行下载最新版。

然后继续写上核心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>
在body的页面部分准备一个页面:

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

    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();
        }
如上代码即可实现输入身份证号时自动检索数据库并给出相关信息,当选择某条数据的时候,自动给文本框赋值,减少了人工的输入。

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




分享到:
评论

相关推荐

    让页面的输入框拥有自动完成提示功能

    一直自制的自动提示控件。基于jquery的。可以让页面中,所有calss= 'needToRemember'的 type="text"控件拥有自动完成功能。演示文档可以在 html/test.html 中看到。

    jQuery+ASP.NET输入框提示自动完成功能

    内容索引:.NET源码,Ajax相关,自动完成,输入框提示,AJAX jQuery+实现的输入框提示功能,也可称作“自动完成”,3.5支持,测试环境不符,因些没有抓到运行截图,不过从作者书写代码的认真程度来说,正常运行应该没...

    ASP.NET常用代码

    ASP.NET常用代码 1. 打开新的窗口并传送参数: 传送参数: response.write("&lt;script&gt;window.open('*.aspx?id="+this.DropDownList1.SelectIndex+"&id1="+...+"')&lt;/script&gt;") 接收参数: string a = Request....

    ASP.NET 验证码控件及其好用【推荐】

    ASP.NET 验证码控件及其好用【推荐】 网上寻的 一、控件特点: 1、使用方便,只需要从工具栏直接拖到页面即可自动验证,零代码使用。 2、自动完成客户端以及服务器的验证码验证,Ajax验证,随用户输入即时 验证...

    asp.net 使用控件

    6 AutoCompleteExtender 自动的提示功能,在Google和丁丁地图中都用实现效果,不错的哦 7 CalendarExtender 日历控件 8 CascadingDropDown 级联下拉菜单 9 CollapsiblePanelExtender 点击某个控件,显示一个特定...

    .Net 验证码控件【拖入即可应用】

    2、自动完成客户端以及服务器的验证码验证,Ajax验证,随用户输入即时 验证并友好提示。 3、可自定义验证码图片外观。 4、有水平方向垂直方向两种方式选择。 5、有数字、小写字母、大写字母三种及任意两种组合...

    ASP.NET程序中常用的三十三种代码.txt

    ASP.NET程序中常用的三十三种代码 1. 打开新的窗口并传送参数:  传送参数: response.write("&lt;script&gt;window.open(’*.aspx?id="+this.DropDownList1.SelectIndex+"&id1="+...+"’)&lt;/script&gt;")  接收参数: ...

    .Net 验证码控件

    .Net 验证码控件 操作简单,使用方便参数使用有详细介绍 拖入即可应用!!!!!! 添加到工具箱的步骤 1.将 Vincent.AutoAuthCode.dll 添加到项目的 Bin文件目录下 2.右键点击 Bin 目录 选择添加引用 找到添加...

    利用AjaxControlToolkit实现百度搜索时的下拉列表提示详细步骤

    可以实现自动补充文本框,点击文本框弹出日历,加水印等Ajax效果,包含40多个控件,具体实现效果如:http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Default.aspx 像百度搜索一样,根据用户输入自动...

    HiShop网店系统

    08.[修改] 推荐给好友页面的留言内容输入框修改为可以输入多行的文本框 09.[修改] 后台品牌分类加上排序功能,前后台默认将最新添加的品牌显示在最前面 10.[修改] 将商品分类的导购信息扩展为5个 11.[修改] 修正...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -使得Asp.net的控件ImageButton具有和Asp.net的Button控件类似的行为(Ajax提交)(feedback:261629698)。 +TabStrip增加GetAddTabReference和GetRemoveTabReference两个函数,用来向TabStrip控件动态增加删除Tab。...

    ExtAspNet_v2.3.2_dll

    ExtAspNet - ExtJS based ASP.NET Controls with Full AJAX Support ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有ViewState,没有JavaScript,没有CSS,没有...

    行业贸易商务门户网站系统正式版

    asp.net行业电子商务网站系统蓝色版下载,B2B电子商务平台、电子商务网站管理系统,专为各行业门户贸易网站设计的,ASP.NET编程的行业B2B电子商务系统全功能,利用B2B仿阿里巴巴电子商务网上贸易网站管理系统,可在全球...

    。net图书管理系统设计方案

    IIS是ASP.NET惟一可以使用的Web服务器,所以,为了能够运行ASP.NET,就一定要安装IIS。 (1) IIS的安装 如果使用的是Windows 2000操作系统,那么安装的IIS的版本是IIS 5.0;如果使用的是Windows XP操作系统,那么...

    editplus 代码编辑器html c++ jsp css

    3. 浏览/输入 STX(语法文件部分) 以及 ACP(自动完成文件部分)。 添加剪辑库文件(*.CTL) 复制相应 *.CTL 文件到软件安装目录,重新启动 EditPlus ,则系统自动识别。 上面重复使用了“[0-9]”,表示连续出现的...

    一款非常好的WPF编程宝典2010 源代码

    9.2.1 一个具有导航功能的基于 页面的简单应用程序 206 9.2.2 Page类 208 9.2.3 超链接 209 9.2.4 在一个框架中宿主页面 211 9.2.5 在另外一个页面中宿主页面 212 9.2.6 在Web浏览器中宿主页面 213 9.3 页面...

    C#编程经验技巧宝典

    102 &lt;br&gt;0162 如何实现C#中用键完成TAB的功能 102 &lt;br&gt;0163 如何限制文本框密码输入长度 102 &lt;br&gt;0164 数据输入为空提示 103 &lt;br&gt;0165 如何设置文本框光标到末尾 103 &lt;br&gt;0166 输入法调整...

Global site tag (gtag.js) - Google Analytics