在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 中看到。
内容索引:.NET源码,Ajax相关,自动完成,输入框提示,AJAX jQuery+实现的输入框提示功能,也可称作“自动完成”,3.5支持,测试环境不符,因些没有抓到运行截图,不过从作者书写代码的认真程度来说,正常运行应该没...
ASP.NET常用代码 1. 打开新的窗口并传送参数: 传送参数: response.write("<script>window.open('*.aspx?id="+this.DropDownList1.SelectIndex+"&id1="+...+"')</script>") 接收参数: string a = Request....
ASP.NET 验证码控件及其好用【推荐】 网上寻的 一、控件特点: 1、使用方便,只需要从工具栏直接拖到页面即可自动验证,零代码使用。 2、自动完成客户端以及服务器的验证码验证,Ajax验证,随用户输入即时 验证...
6 AutoCompleteExtender 自动的提示功能,在Google和丁丁地图中都用实现效果,不错的哦 7 CalendarExtender 日历控件 8 CascadingDropDown 级联下拉菜单 9 CollapsiblePanelExtender 点击某个控件,显示一个特定...
2、自动完成客户端以及服务器的验证码验证,Ajax验证,随用户输入即时 验证并友好提示。 3、可自定义验证码图片外观。 4、有水平方向垂直方向两种方式选择。 5、有数字、小写字母、大写字母三种及任意两种组合...
ASP.NET程序中常用的三十三种代码 1. 打开新的窗口并传送参数: 传送参数: response.write("<script>window.open(’*.aspx?id="+this.DropDownList1.SelectIndex+"&id1="+...+"’)</script>") 接收参数: ...
.Net 验证码控件 操作简单,使用方便参数使用有详细介绍 拖入即可应用!!!!!! 添加到工具箱的步骤 1.将 Vincent.AutoAuthCode.dll 添加到项目的 Bin文件目录下 2.右键点击 Bin 目录 选择添加引用 找到添加...
可以实现自动补充文本框,点击文本框弹出日历,加水印等Ajax效果,包含40多个控件,具体实现效果如:http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Default.aspx 像百度搜索一样,根据用户输入自动...
08.[修改] 推荐给好友页面的留言内容输入框修改为可以输入多行的文本框 09.[修改] 后台品牌分类加上排序功能,前后台默认将最新添加的品牌显示在最前面 10.[修改] 将商品分类的导购信息扩展为5个 11.[修改] 修正...
-使得Asp.net的控件ImageButton具有和Asp.net的Button控件类似的行为(Ajax提交)(feedback:261629698)。 +TabStrip增加GetAddTabReference和GetRemoveTabReference两个函数,用来向TabStrip控件动态增加删除Tab。...
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仿阿里巴巴电子商务网上贸易网站管理系统,可在全球...
IIS是ASP.NET惟一可以使用的Web服务器,所以,为了能够运行ASP.NET,就一定要安装IIS。 (1) IIS的安装 如果使用的是Windows 2000操作系统,那么安装的IIS的版本是IIS 5.0;如果使用的是Windows XP操作系统,那么...
3. 浏览/输入 STX(语法文件部分) 以及 ACP(自动完成文件部分)。 添加剪辑库文件(*.CTL) 复制相应 *.CTL 文件到软件安装目录,重新启动 EditPlus ,则系统自动识别。 上面重复使用了“[0-9]”,表示连续出现的...
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 页面...
102 <br>0162 如何实现C#中用键完成TAB的功能 102 <br>0163 如何限制文本框密码输入长度 102 <br>0164 数据输入为空提示 103 <br>0165 如何设置文本框光标到末尾 103 <br>0166 输入法调整...