引入所需文件

<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的更多相关文章

  1. Jquery实现文本框输入提示

    一些用户体验好的表单都会在文本框里设置输入提示,文本框获取焦点时,提示内容消息,如果未输入,失去焦点时又会出现提示. 网上找到一个比较好用的控件jquery.inputDefault.js 使用方法: ...

  2. 分享一个仅0.7KB的jQuery文本框输入提示插件

    由于项目需要,找过几个jQuery文本框输入提示插件来用,但总是有不满意的地方,要么体积较大,要么使用不便,要么会出现把提示文字作为文本框的值的情况.于是我们自己的开发团队制作了这个最精简易用的输入提 ...

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

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

  4. Jquery 限制文本框输入字数【转】

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

  5. 使用jquery实现文本框输入特效:文字逐个显示逐个消失反复循环

    前两天看到某个网站上的输入框有个小特效:文字逐个显示,并且到字符串最大长度后,逐个消失,然后重新循环显示消失,循环显示字符串数组.我对这个小特效有点好奇,于是今天自己尝试用jquery写一个简单的小d ...

  6. jquery判断文本框输入的是非数字内容(交流QQ群:452892873)

    isNaN($(this).val())==false   输入的是数字, isNaN($(this).val())==true  输入的是非数字内容

  7. jQuery限制文本框的输入长度

    jQuery限制文本框输入,包含粘贴. //限制文本框的输入长度 $(function () { $(document).on("keypress", ".txt-val ...

  8. 用Jquery控制文本框只能输入数字和字母

    用Jquery控制文本框只能输入数字和字母 $.fn.onlyNum = function () { $(this).keypress(function (event) { var eventObj ...

  9. JQuery 限制文本框只能输入数字和小数点

    $(function(){ /*JQuery 限制文本框只能输入数字*/ $(".NumText").keyup(function(){ $(this).val($(this).v ...

随机推荐

  1. eclipse 远程调试tomcat6

    一.tomcat6配置 1.修改tomcat\bin目录下的startup.bat如下,红色部分是新增的,修改后另存为jpda.bat set JPDA_ADDRESS=8114set JPDA_TR ...

  2. LeetCode OJ:First Missing Positive (第一个丢失的正数)

    在leetCode上做的第一个难度是hard的题,题目如下: Given an unsorted integer array, find the first missing positive inte ...

  3. Tinymce group plugin

    本文介绍一个tinymce插件,用来组合显示下拉的按钮.基于4.x,不兼容3.x. 以前 配置toolbar功能按钮 需要          toolbar1: "code undo red ...

  4. Visual Studio编辑类模板的位置

    VS的版本一直在不断更新,每个版本的安装目录都是有一点变化,所以模板文件的位置也是不一样的,下面是从StackOverflow看到的一个大合集,转发记录一下: Extract, edit and re ...

  5. Linux SSH的命令详解[转]

    http://www.linuxidc.com/Linux/2008-02/11055.htm前一阵远程维护Linux服务器,使用的是SSH,传说中的secure shell. 登陆:ssh [hos ...

  6. HTTP 方法:GET与 POST

    什么是 HTTP? 超文本传输协议(HTTP)的设计目的是保证客户机与服务器之间的通信. HTTP 的工作方式是客户机与服务器之间的请求-应答协议. web 浏览器可能是客户端,而计算机上的网络应用程 ...

  7. InpOutx64 替代 winIOx64

    /***************************************************************************** * InpOutx64 替代 winIOx ...

  8. 为什么要使用ORM技术?和 JDBC 有何不一样?

    为什么要使用ORM技术?和 JDBC 有何不一样?        1.繁琐的代码问题:        用JDBC的API编程访问数据库,代码量较大,特别是访问字段较多的表的时候,代码显得繁琐.累赘,容 ...

  9. niosii 改变软核之后重新编译方法

    操作系统:Win7 64 bit 开发环境:Quartus II 12.0 (64-Bit)  + Nios II 12.0 Software Build Tools for Eclipse 使用Qu ...

  10. subline自定义快捷键

    由于感觉原始subline的运行快捷键ctrl+b不是很方便,尝试修改,方法如下: 打开首选项 --> 快捷键设置 Key Bindings -Default //这个表示系统默认的快捷键.Ke ...