在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

ASP.NET输入文本框自动提示功能相关推荐

  1. [原创]Flex文本框自动提示(AutoSuggest)、自动完成(AutoComplete)

    做一个小程序要用到Flex文本框自动提示的功能,因为时间不是很紧,所以决定自己动手做这个小组件,花了一个晚上的时间终于完成了.贴出来与大家分享一下. 虽然网上有不少这样的组件,但自己动手做可以锻炼下思 ...

  2. Ajax实现百度搜索框自动提示功能

    Ajax实现百度搜索框自动提示功能 当你在搜索框内写入关键字时下拉框会匹配和你输入的关键字相匹配的信息 文章目录 Ajax实现百度搜索框自动提示功能 一.实现效果 二.代码实现 1.前端页面 2.后端 ...

  3. 文本框自动提示_Excel办公小技巧，使用艺术字与文本框，就是那么的简单

    Excel中的艺术字同时拥有文字和图形两种对象的属性,不仅可以修改其中的内容,还可以调整形状的大小.设置边框以及内部填充等效果,常在编辑表格标题或者输入一些比较有提示性的文本时使用,在突出关键内容的同 ...

  4. input的属性AutoComplete——关闭浏览器文本框自动提示

    1. 有时候我们并不需要AutoComplete,例如需要用户自己再次输入而非自动完成.只要将所在表单元素的autocomplete属性设置为off即可. <form> 请双击文本框 &l ...

  5. jquery mysql jsp搜索功能_实现搜索框自动提示功能（jquery+php）

    客户端代码 #search{font-size:14px;} #search .k{padding:2px 1px; width:320px;} #search_auto{border:1px sol ...

  6. axure文本框单击提示文字消失_Axure基础原件使用

    本内容从网上搜索,仅供参考学习 1. 添加元件到工作区 在左侧元件中选择要使用的元件,按住鼠标左键不放,拖到画布适合的位置上松开. 2. 添加元件名称 在检视面板的元件名称文本框中输入元件自定义名称. ...

  7. Android学习笔记 2.5.3 实例——使用SimpleAdapter创建ListView 2.5.4 自动完成文本框(AutoCompleteTextView)的功能与用法

    Android学习笔记 疯狂Android讲义 文章目录 Android学习笔记 疯狂Android讲义 第2章 Android 应用的界面编程 2.5 第4组 UI组件:AdapterView及其子 ...

  8. Eclipse输入Java和XML代码自动提示功能最简单的方法

    Eclipse输入Java和XML代码自动提示功能 1.设置 java 文件的代码提示功能 打 开 Eclipse 依次选择 Window > Preferences > Java > ...

  9. javascript弹出浏览器的三种提示框：提示信息框、确认框、输入文本框

    浏览器的三种提示框: alert()提示信息框 confirm()提示确认框 prompt()提示输入文本框 1.alert()提示信息框 效果: 实现代码: <script>alert( ...

  10. JavaScript实现弹出浏览器的三种提示框：提示信息框、确认框和输入文本框

    浏览器的三种提示框 1.alert()提示信息框 2.confirm()提示确认框 3.prompt()提示输入文本框 1.alert()提示信息框 效果图: 实现代码: <script> ...

最新文章

  1. 语义分割车道线，来自两篇论文的融合算法
  2. python导入json模块_Python调用json模块代码实例
  3. 机器之心 Synced 08月12日 20:59
  4. ESXi 内存回收机制
  5. java ee 企业级意味着什么意思_​Java EE是什么意思
  6. openstack学习之路-python运维（network）
  7. 小白文件管理器 无法与服务器建立联系,小白文件管理器怎么用
  8. Highcharts exporting属性实现图表导出为图片、PDF
  9. yasm linux gcc,vs+msys2+yasm 编译libx264+ffmpeg详细解释（32位或64位）
  10. Lefse本地运行并更换颜色
  11. 狂奔五年后，拼多多需要静静
  12. JUC Striped64
  13. Google Apps申请注册
  14. 远程工具之一---rsync用法介绍
  15. 多设备monkey测试工具_基于Tkinter GUI操作
  16. CIKM 2022 AnalytiCup Competition: 联邦异质任务学习
  17. 设计模式（初探工厂与代理模式）——学习记录
  18. 软件测试-白盒测试：逻辑覆盖
  19. PyTorch (二)：数据可视化 (TensorBoard、Visdom)
  20. Voluptuous库笔记

热门文章

  1. 原创engine中地块的自动编号函数
  2. 『原创·翻译』如何阅读论文
  3. [libgdx游戏开发教程]使用Libgdx进行游戏开发(11)-高级编程技巧 Box2d和Shader
  4. 推荐一个CodeProject上的SlideForm控件
  5. 既然选择了远方，便只顾风雨兼程……
  6. python 多个装饰器的调用顺序
  7. 在mac上用parallels创建双windows虚拟机调试windows驱动
  8. NodeJs和ReactJs单元测试工具——Jest
  9. LeetCode() Reorder List
  10. C# 生成高清缩略图