转摘：ashx+jquery-autocomplete文本框输入提示功能Asp.net
引入所需文件
<script type="text/javascript" src="JS/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.autocomplete.min.js"></script>
<link href="CSS/jquery.autocomplete.css" rel="stylesheet" />
动态单属性数据源
前台代码：
$(document).ready(function () {
$("#txtAutoComplete").autocomplete("AutoComplete.ashx", {
max: 10, //列表里的条目数
minChars: 1, //自动完成激活之前填入的最少字符
scrollWidth: 173, //提示的宽度，溢出隐藏
scrollHeight: 200, //提示的高度，溢出显示滚动条
scroll: true, //是否显示滚动条
matchContains: true, //包含匹配，是否只显示匹配项
autoFill: false, //自动填充
//此处实际请求的URL为"AutoComplete.ashx?q='[你在txtAutoComplete中输入的值]'&action='autoComplete'&value='guo'"
extraParams: { action: "autoComplete", value: "guo" },
//格式化列表中的条目 row:条目对象,i:当前条目index,max:总条目数
formatItem: function (row, i, max) {
//【不用转化为js对象，但必须返回row.toString()】
return row.toString();
},
//配合formatItem使用，作用在于，由于使用了formatItem，所以显示的条目内容有所改变，
//而我们要匹配的是原始的数据，所以用formatMatch做一个调整，使之匹配原始数据
formatMatch: function (row, i, max) {
//【不用转化为js对象，但必须返回row.toString()】
return row.toString();
},
//设置用户选择某一条目后文本框显示的内容
formatResult: function (row) {
//【不用转化为js对象，但必须返回row.toString()】
return "文本框显示的结果：" + row.toString();
}
}).result(function (event, row, formatted) {
//获取用户选择的条目
alert(row.toString());
});
});
<body>
<form id="form1" runat="server">
请输入：<input type="text" id="txtAutoComplete" />
</form>
</body>
AutoComplete.ashx后台代码：
public class AutoComplete : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//text表示用户在文本框输入的内容
string text = context.Request.QueryString["q"];
string action = context.Request.QueryString["action"];
string value = context.Request.QueryString["value"];
<!--各项之间必须用"\n"隔开，不能用","隔开-->
string strResult = "guo\ntong\nchang\nwang\nhao\nbang";
context.Response.Write(strResult);
} public bool IsReusable
{
get
{
return false;
}
}
}
动态多属性数据源
前台代码：
$(document).ready(function () {
$("#txtAutoComplete").autocomplete("AutoComplete.ashx", {
max: 10, //列表里的条目数
minChars: 1, //自动完成激活之前填入的最少字符
width: 173, //提示的宽度，溢出隐藏
scrollHeight: 200, //提示的高度，溢出显示滚动条
scroll: true, //是否显示滚动条
matchContains: true, //包含匹配，是否只显示匹配项
autoFill: false, //自动填充
//此处实际请求的URL为"AutoComplete.ashx?q='[你在txtAutoComplete中输入的值]'&action='autoComplete'&value='guo'"
extraParams: { action: "autoComplete", value: "guo" },
//格式化列表中的条目，使其以自定义格式显示
//row:条目对象,i:当前条目index,max:总条目数
formatItem: function (row, i, max) {
//转换成js对象 【不同点1】
var obj = eval('(' + row + ')');
return i + "/" + max + "： " + obj.key + obj.value;
},
//配合formatItem使用，作用在于，由于使用了formatItem，所以显示的条目内容有所改变，
//而我们要匹配的是原始的数据，所以用formatMatch做一个调整，使之匹配原始数据
formatMatch: function (row, i, max) {
//转换成js对象
var obj = eval('(' + row + ')');
return "Match：" + obj.key + row.value;
},
//设置用户选择某一条目后文本框显示的内容
formatResult: function (row) {
//转换成js对象
var obj = eval('(' + row + ')');
return "文本框显示的结果：" + obj.key;
}
}).result(function (event, row, formatted) {
//获取用户选择的条目,并转换成js对象
var obj = eval('(' + row + ')');
alert(obj.key);
});
});
<body>
<form id="form1" runat="server">
请输入：<input type="text" id="txtAutoComplete" />
</form>
</body>
AutoComplete.ashx后台代码：
public class AutoComplete : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//text表示用户在文本框输入的内容
string text = context.Request.QueryString["q"];
string action = context.Request.QueryString["action"];
string value = context.Request.QueryString["value"];
<!--数据格式【不同点2】-->
<!--各项之间必须用"\n"隔开，不能用","隔开-->
string strResult = "{key:\"one\",value:\"第一\"}\n"+
"{key:\"two\",value:\"第二\"}\n"+
"{key:\"three\",value:\"第三\"}\n"+
"{key:\"four\",value:\"第四\"}\n"+
"{key:\"five\",value:\"第五\"}\n"+
"{key:\"six\",value:\"第六\"}";
context.Response.Write(strResult);
} public bool IsReusable
{
get
{
return false;
}
}
}
jquery.autocomplete.min.js文件免费下载地址：http://download.csdn.net/detail/xiaouncle/9618021
jquery.autocomplete.css文件免费下载地址：http://download.csdn.net/detail/xiaouncle/9618024
转摘：http://blog.csdn.net/xiaouncle/article/details/52372974
转摘：ashx+jquery-autocomplete文本框输入提示功能Asp.net的更多相关文章
- Jquery实现文本框输入提示
一些用户体验好的表单都会在文本框里设置输入提示,文本框获取焦点时,提示内容消息,如果未输入,失去焦点时又会出现提示. 网上找到一个比较好用的控件jquery.inputDefault.js 使用方法: ...
- 分享一个仅0.7KB的jQuery文本框输入提示插件
由于项目需要,找过几个jQuery文本框输入提示插件来用,但总是有不满意的地方,要么体积较大,要么使用不便,要么会出现把提示文字作为文本框的值的情况.于是我们自己的开发团队制作了这个最精简易用的输入提 ...
- ASP.NET输入文本框自动提示功能
在ASP.NET Web开发中会经常用到自动提示功能,比如百度搜索.我们只要输入相应的关键字,就可以自动得到相似搜索关键字的提示,方便我们快速的输入关键字进行查询. 那么在ASP.NET中,如果我们需 ...
- Jquery 限制文本框输入字数【转】
<script type="text/javascript" src="js/jquery.min.js" ></script> < ...
- 使用jquery实现文本框输入特效：文字逐个显示逐个消失反复循环
前两天看到某个网站上的输入框有个小特效:文字逐个显示,并且到字符串最大长度后,逐个消失,然后重新循环显示消失,循环显示字符串数组.我对这个小特效有点好奇,于是今天自己尝试用jquery写一个简单的小d ...
- jquery判断文本框输入的是非数字内容（交流QQ群：452892873）
isNaN($(this).val())==false 输入的是数字, isNaN($(this).val())==true 输入的是非数字内容
- jQuery限制文本框的输入长度
jQuery限制文本框输入,包含粘贴. //限制文本框的输入长度 $(function () { $(document).on("keypress", ".txt-val ...
- 用Jquery控制文本框只能输入数字和字母
用Jquery控制文本框只能输入数字和字母 $.fn.onlyNum = function () { $(this).keypress(function (event) { var eventObj ...
- JQuery 限制文本框只能输入数字和小数点
$(function(){ /*JQuery 限制文本框只能输入数字*/ $(".NumText").keyup(function(){ $(this).val($(this).v ...
随机推荐
- Python输出中文到文件时的字符编码问题
今天在使用Python的GUI平台wxPython时,写了一个只有打开.编辑.保存功能的简易笔记本,代码如下: #coding:utf-8 import wx def load(event): f = ...
- vim 插件使用
a.vim的安装相当简单,下载a.vim后丢进Vim插件目录(一般为~/.vim/plugin),必要时再重启一下Vim就可以使用了. 头/源文件切换命令 :A 头文件/源文件切换 :AS 分割窗后并 ...
- asp.net 禁止回车输入
//只在输入框禁止输入回车 if(event.keyCode==13&&event.srcElement.type=="textarea") { ...
- 【转】 史上最详尽的平衡树(splay)讲解与模板（非指针版spaly）
ORZ原创Clove学姐: 变量声明:f[i]表示i的父结点,ch[i][0]表示i的左儿子,ch[i][1]表示i的右儿子,key[i]表示i的关键字(即结点i代表的那个数字),cnt[i]表示i结 ...
- 使用wlan接收器经常重新登录怎么办
wlan接收器是一个大功率的网卡,能够接受耿远距离的无线网络,在农村和乡镇很普及,很多家庭里都是用这个装置来接受远距离的CMCC信号.但是在使用的时候会经常出现一些问题,例如我们登陆以后,还没等上网就 ...
- fpga产生伪随机序列
1,一位模二加法法则:加减法等同于异或,没有进位. 2,将移位寄存器的某几级作为抽头进行模二加法后作为反馈输入,就构成了有反馈的动态移位寄存器.此方法产生的序列是有周期的. 3,假设移位寄存器的级数为 ...
- Spring Aware接口---BeanNameAware BeanFactoryAware ApplicationContextAware
前言 对于应用程序来说,应该尽量减少对spring api的耦合程度,然后有时候为了运用spring提供的一些功能,有必要让bean了解spring容器对其管理的细节信息,如让bean知道在容器中是以 ...
- 浅谈Sql各种join的用法
1.left join.right join.inner join三者区别 left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右 ...
- Spring读取properties资源文件
我们知道可以通过读取资源文件流后加载到Properties对象,再使用该对象方法来获取资源文件.现在介绍下利用Spring内置对象来读取资源文件. 系统启动时加载资源文件链路:web.xml --&g ...
- Oracle记录（二） SQLPlus命令
对于Oracle数据库操作主要使用的是命令行方式,而所有的命令都使用sqlplus完成,对于sqlplus有两种形式.就我个人而言,还是比较喜欢UNIX与Linux下的Oracle.呵呵 一种是dos ...