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

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

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

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

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

一、aspx页面

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

<code><</code><code>script</code> <code>src</code><code>=</code><code>"../js/jquery-1.4.2.js"</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>></</code><code>script</code><code>></code>

<code><</code><code>link</code> <code>href</code><code>=</code><code>"../js/jquery.autocomplete.css"</code> <code>rel</code><code>=</code><code>"stylesheet"</code> <code>type</code><code>=</code><code>"text/css"</code> <code>/></code>

<code><</code><code>script</code> <code>src</code><code>=</code><code>"../js/jquery.autocomplete.js"</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>></</code><code>script</code><code>></code>

注意jquery-1.4.2.js一定要在最上面，因为autocomplete插件基于核心jquery.js。至于jquery的版本，读者可以自行下载最新版。

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

<code><script type=</code><code>"text/javascript"</code><code>></code>

<code> </code><code>$(</code><code>function</code><code>(){</code>

<code> </code><code>$(</code><code>"#<%=txtSfzh.ClientID %>"</code><code>).autocomplete(</code><code>"../services/SearchSyryInfoService.ashx"</code><code>,{</code>

<code> </code><code>width: 500,</code>

<code> </code><code>delay: 5,</code>

<code> </code><code>cacheLength: 1,</code>

<code> </code><code>formatItem: </code><code>function</code><code>(data, i, max) {</code>

<code> </code><code>return</code> <code>data.toString();</code>

<code> </code><code>formatResult: </code><code>function</code><code>(data) {</code>

<code> </code><code>return</code> <code>data.toString().split(</code><code>","</code><code>)[1];</code>

<code> </code><code>}).result(</code><code>function</code><code>(event, data, formatted) {</code>

<code> </code><code>var</code> <code>array = data.toString().split(</code><code>","</code><code>);</code>

<code> </code><code>$(</code><code>"#<%=txtXm.ClientID %>"</code><code>).val(array[0]);</code><code>//姓名</code>

<code> </code><code>$(</code><code>"#<%=txtSfzh.ClientID %>"</code><code>).val(array[1]);</code><code>//身份证号</code>

<code> </code><code>$(</code><code>"#<%=txtJtzz.ClientID %>"</code><code>).val(array[2]);</code><code>//家庭住址</code>

<code> </code><code>$(</code><code>"#<%=txtLxdh.ClientID %>"</code><code>).val(array[3]);</code><code>//联系电话</code>

在body的页面部分准备一个页面：

<code><</code><code>table</code> <code>cellpadding</code><code>=</code><code>"0"</code> <code>cellspacing</code><code>=</code><code>"0"</code> <code>border</code><code>=</code><code>"1"</code> <code>width</code><code>=</code><code>"100%"</code><code>></code>

<code> </code><code><</code><code>label</code><code>></code>

<code> </code><code>身份证号</</code><code>label</code><code>></code>

<code> </code><code><</code><code>asp:TextBox</code> <code>runat</code><code>=</code><code>"server"</code> <code>ID</code><code>=</code><code>"txtSfzh"</code> <code>/></code>

<code> </code><code>姓名</</code><code>label</code><code>></code>

<code> </code><code><</code><code>asp:TextBox</code> <code>runat</code><code>=</code><code>"server"</code> <code>ID</code><code>=</code><code>"txtXm"</code> <code>/></code>

<code> </code><code>家庭地址</</code><code>label</code><code>></code>

<code> </code><code><</code><code>asp:TextBox</code> <code>runat</code><code>=</code><code>"server"</code> <code>ID</code><code>=</code><code>"txtJtzz"</code> <code>/></code>

<code> </code><code>联系电话</</code><code>label</code><code>></code>

<code> </code><code><</code><code>asp:TextBox</code> <code>runat</code><code>=</code><code>"server"</code> <code>ID</code><code>=</code><code>"txtLxdh"</code> <code>/></code>

<code> </code><code><</code><code>tr</code> <code>align</code><code>=</code><code>"center"</code><code>></code>

<code> </code><code><</code><code>td</code> <code>colspan</code><code>=</code><code>"4"</code><code>></code>

<code> </code><code><</code><code>asp:Button</code> <code>ID</code><code>=</code><code>"btnSearch"</code> <code>runat</code><code>=</code><code>"server"</code> <code>Text</code><code>=</code><code>"查询"</code> <code>Width</code><code>=</code><code>"80px"</code> <code>OnClick</code><code>=</code><code>"btnSearch_Click"</code> <code>/> </code>

<code> </code><code><</code><code>asp:Button</code> <code>ID</code><code>=</code><code>"btnReset"</code> <code>runat</code><code>=</code><code>"server"</code> <code>Text</code><code>=</code><code>"重置"</code> <code>Width</code><code>=</code><code>"80px"</code> <code>OnClick</code><code>=</code><code>"btnReset_Click"</code> <code>/></code>

<code> </code><code></</code><code>table</code><code>></code>

二、ashx后台

<code>public</code> <code>void</code> <code>ProcessRequest(HttpContext context)</code>

<code> </code><code>context.Response.ContentType = </code><code>"text/plain"</code><code>;</code>

<code> </code><code>if</code> <code>(context.Request.QueryString[</code><code>"q"</code><code>] != </code><code>null</code><code>)</code>

<code> </code><code>string</code> <code>key = context.Request.QueryString[</code><code>"q"</code><code>];</code>

<code> </code><code>if</code> <code>(key.Trim().Length >= 8)</code><code>//大于等于8位，才去查数据库。这是为了缓解数据库查询的压力，只当输入了8位以上身份证以后才进行数据库检索。</code>

<code> </code><code>string</code> <code>keyValues = GetKeyValues(key);</code>

<code> </code><code>context.Response.Write(keyValues);</code>

<code> </code><code>public</code> <code>bool</code> <code>IsReusable</code>

<code> </code><code>return</code> <code>false</code><code>;</code>

<code> </code><code>public</code> <code>static</code> <code>string</code> <code>GetKeyValues(</code><code>string</code> <code>key)</code>

<code> </code><code>DataTable dt = bll.GetPersons(key).Tables[0];</code><code>//通过关键字k（k是前台页面输入的身份证号码）到后台去查询人员信息并返回一个结果集</code>

<code> </code><code>StringBuilder sb = </code><code>new</code> <code>StringBuilder();</code>

<code> </code><code>foreach</code> <code>(DataRow dr </code><code>in</code> <code>dt.Rows)</code>

<code> </code><code>sb.Append(dr[</code><code>"result"</code><code>].ToString() + </code><code>"\n"</code><code>);</code>

<code> </code><code>return</code> <code>sb.ToString().Trim();</code>

如上代码即可实现输入身份证号时自动检索数据库并给出相关信息，当选择某条数据的时候，自动给文本框赋值，减少了人工的输入。

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

本文转自 guwei4037 51CTO博客，原文链接:http://blog.51cto.com/csharper/1345987

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

继续阅读

MySQL的4种隔离级别？出现问题

tab鼠标经过菜单切换

XX系统实施过程问题总结

vue （vue2.0）使用总结(从大体结构总结)

无组件上传图片到数据库中，最完整解决方案

vue搭建过程及出现问题

【MySQL数据库】数据库索引事务1.索引2.事务

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

neo4j之cypher使用文档

适用于JavaScript的ECMAScript 2020规范向前发展

NOSQL安全攻击

mybatis_入门程序Mybatis入门

JS生成uuid的四种方法

登录plsql 报错 the account is locked --用户被锁

SequoiaDB巨杉数据库C++驱动概述

layui多任务上传添加进度条