转摘：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 Proce***equest(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 Proce***equest(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 = "{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;
}
}
}原文地址：https://blog.51cto.com/u_15078738/2735156
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
