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>
注意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位以上身份证以后才进行数据库检索。
{
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[];//通过关键字k(k是前台页面输入的身份证号码)到后台去查询人员信息并返回一个结果集
StringBuilder sb = new StringBuilder();
foreach (DataRow dr in dt.Rows)
{
sb.Append(dr["result"].ToString() + "\n");
}
return sb.ToString().Trim();
}
如上代码即可实现输入身份证号时自动检索数据库并给出相关信息,当选择某条数据的时候,自动给文本框赋值,减少了人工的输入。
鉴于信息保密,这里就不上传效果图了,读者可以自己动手试一试。
ASP.NET输入文本框自动提示功能的更多相关文章
- myeclipse输入“.”后没有自动提示功能
今天和室友安装了一样的myeclipse版本,结果室友的自动提示功能有,我的输入"."后却不能提示,这对我们敲代码简直来说是一个折磨,不能自动提示,本来还以为是系统问题,一个是wi ...
- Ajax实现搜索栏中输入时的自动提示功能
使用 jQuery(Ajax)/PHP/MySQL实现自动完成功能 JavaScript代码: <script src="jquery-1.2.1.pack.js" type ...
- 基于JQuery实现的文本框自动填充功能
1. 实现的方法 /* * js实现的文本框的自动完成功能 */ function doAutoComplete(textid,dataid,url){ $("#" + texti ...
- jquery 实现邮箱输入自动提示功能
邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,所有自己也实现了一个,先看下效果吧,觉得效果还行的就拿去 ...
- jquery 实现邮箱输入自动提示功能:(一)
记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅. 邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作 ...
- jquery 实现邮箱输入自动提示功能:(二)
上篇文章写到了一个不错的jquery实现邮箱输入自动提示功能,发现还有一个不错的自动提示插件: 先展示结果如图: html代码: <center> <h1>输入邮箱试试!< ...
- Android实现Filterable通过输入文本框实现联系人自动筛选
相信大家一定在见过手机通讯录的一个情景就是使用在选人的时候输入文本框里的数据就能自动筛选.实现的效果如下图. 其实实现这样的效果相信大家一定对另外一个控件不陌生那就AutoCompleteTextvi ...
- JS基础 浏览器弹出的三种提示框(提示信息框、确认框、输入文本框)
浏览器的三种提示框 alert() //提示信息框 confirm() //提示确认框 prompt() //提示输入文本框 1.alert( ) 提示信息框 <script> alert ...
- JQ三种提示框:提示信息框、确认框、输入文本框
浏览器的三种提示框: alert()提示信息框 confirm()提示确认框 prompt()提示输入文本框 1.alert()提示信息框 效果: 实现代码: <script> alert ...
随机推荐
- Codeforces Round #325 (Div. 2) A. Alena's Schedule 水题
A. Alena's Schedule Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/586/pr ...
- PrintJ的设计模式之旅——1.模式之父
好奇设计模式的源头,做了一番搜索和调查,于是便开启了这个系列“PrintJ的设计模式之旅”. 1.模式之父 GOF(Gang of Four) Erich Gamma.Richard Helm.Ral ...
- careercup-中等难度 17.12
17.12 设计一个算法,找出数组中两数之和为指定值的所有整数对. 解答 时间复杂度O(n)的解法 我们可以用一个哈希表或数组或bitmap(后两者要求数组中的整数非负)来保存sum-x的值, 这样我 ...
- Android 框架修炼-自己开发高效异步图片加载框架
一.概述 目前为止,第三方的图片加载框架挺多的,比如UIL , Volley Imageloader等等.但是最好能知道实现原理,所以下面就来看看设计并开发一个加载网络.本地的图片框架. 总所周知,图 ...
- jquery循环遍历radio单选按钮,并设置选中状态
背景:自己在做项目过程中遇到的问题,现在记录一下. 需求:在ajax获取后台数据的之后,需要根据获取的数据对页面中的radio单选按钮进行选中状态设置 因为自身js功底欠佳,所以耽误了点时间,现在把方 ...
- Linux系统(将web应用部署到tomcat服务器上)
一:tomcat服务开机自启动 将启动命令路径配置到/etc/profile文件中在/etc/profile 文件最后配置 /usr/tomcat/apache-tomcat-6.0.45/bin/s ...
- Genymontion安装
Genymontion是什么 它提供的是Android的虚拟环境,和sdk的模拟器类似,能够支持windows,liunx,mac等操作系统,他比我们SDK的模拟器快很多,所以也是为什么很多开发人员会 ...
- box-shadow学习笔记
CSS3 box-shadow属性的简单学习笔记 语法格式: box-shadow: h-shadow v-shadow blur spread color inset; 值 描述 h-shadow ...
- alert
先别着急测试,来猜测一下下面一行代码执行的结果 alert(alert(1234567)); 此刻,我自己还不是不太理解 我的分析是这样: alert() 是window下面的一个方法 alert(1 ...
- C#中调用存储过程
[csharp] view plain copy print? string strsql = "Data Source=192.168.24.53;Initial Catalog=JF_C ...