Autocomplete 自动补全（Webform实战篇）
2024-10-19 02:19:14
开篇语
因为项目中需要用到一个自动补全的功能，功能描述：
需求一：新增收件人的时候，自动下拉显示出数据库中所有的收件人信息（显示的信息包括：姓名-收件地址-联系方式）
需求二：选中一个值得时候，分别赋值到对应文本框（收件人输入框中赋值 姓名，联系方式输入框中赋值 手机号，收件地址输入框中赋值 地址）
解决需求一（因本人比较懒，所以直接选用了一个比较方便的插件：Autocomplete [参考学习地址：http://www.runoob.com/jqueryui/jqueryui-use.html]）
实现步骤
步骤① 去官网下载对应版本的包，然后在项目中添加这两个引用即可
步骤② 新建一个一般处理程序
步骤三③ 写查询及转换方法
1 在接口里面新增一个查询方法（接口只定义规则，不做具体实现）
2 继承接口并实现查询方法（因为功能需要，这里查询直接做了拼接，查询出来就是“收件人-地址-联系方式”）
3 方法里面调用这个方法进行json数据转换（通用方法可以直接使用）
// var name = context.Request["name"];
// 查询的参数名称默认为term
string query = context.Request.QueryString["term"];
context.Response.ContentType = "text/javascript";
DataTable sendInfoManage = CMSModelManager.SendInfoManageDAO.Method(query);//调用查询方法，返回一个DataTable
//反序列化
System.Web.Script.Serialization.JavaScriptSerializer serailizer = new System.Web.Script.Serialization.JavaScriptSerializer();
List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
Dictionary<string, object> row;
foreach (DataRow dr in sendInfoManage.Rows)
{
row = new Dictionary<string, object>();
foreach (DataColumn col in sendInfoManage.Columns)
{
row.Add(col.ColumnName, dr[col]);
}
rows.Add(row);
} string s= serailizer.Serialize(rows);
context.Response.Write(s);
步骤④ 页面接收返回数据和处理返回数据
$(function() {
var name = $("#ctl00_contentPlace_txtSender").val().trim();
$("#ctl00_contentPlace_txtAddressee").autocomplete({
source: function(request, response) {
$.ajax({
url: "Handler.ashx",//请求地址
type: "post",//请求类型
data: { "name": name },//参数
success: function(data) {
//console.log(data);
response($.map(eval(data), function(item) { //使用该插件必须要用eval（）进行处理
//console.log(item);
return {
value: item.show,//赋值到控件上
result: item.show
}
}));
},
error: function(xhr) {
console.log("发生错误");
}
});
},
});
});
下图对应上图的数据呈现过程
页面效果
补充：这个插件默认没有滚动条，需要手动添加样式（最大高度可以自行设定）
<style type="text/css">
.ui-autocomplete {
max-height: 250px;
overflow-y: auto;
/* 防止水平滚动条 */
overflow-x: hidden;
}
/* IE 6 不支持 max-height
* 我们使用 height 代替，但是这会强制菜单总是显示为那个高度
*/
* html .ui-autocomplete {
height: 250px;
}
</style>
解决需求二：特意查了下Autocomplete返回值处理情况，最终选用select做处理，最后请求的ajax改为：
var showName = null;
$(function() {
$("#ctl00_contentPlace_txtAddressee").autocomplete({
source: function(request, response) {
$.ajax({
url: "Handler.ashx", //请求地址
type: "post", //请求类型
data: { "name": $("#ctl00_contentPlace_txtAddressee").val().trim(), "look": $("#ctl00_contentPlace_txtSendCode").val().trim() }, //参数
success: function(data) {
//console.log(data);
response($.map(eval(data), function(item) { //使用该插件必须要用eval（）进行处理
//console.log(item);
return {
value: item.show, //赋值到控件上
result: item.show
}
})); },
error: function(xhr) {
console.log("发生错误");
}
});
},
select: function(event, ui) {
var li = (ui.item.label).split("-");
$("#ctl00_contentPlace_txtAddressee").val(li[0]);
console.log(li[0]);
showName = li[0];
$("#ctl00_contentPlace_txtContactInfo").val(li[2]);
$("#ctl00_contentPlace_txtMailingAddress").val(li[1]);
showNames();//可以继续调用其他方法
}
});
});
function showNames() {
console.log(showName);
if (showName != null) {
$("#ctl00_contentPlace_txtAddressee").val("");
$("#ctl00_contentPlace_txtMailContent").val("测试数据");
}
}
效果展示：
选中前
选中后
天了噜，什么，竟然收件人赋值不上，找了半天原因（清空后赋值等等）。。。。。
还是没找到问题，不过因为项目急着测试，就想了个偷懒的办法，用延时再赋值的方式调了下，终于可以了
所以最终版的前台请求如下
var showName = null;
$(function() {
$("#ctl00_contentPlace_txtAddressee").autocomplete({
source: function(request, response) {
$.ajax({
url: "Handler.ashx", //请求地址
type: "post", //请求类型
data: { "name": $("#ctl00_contentPlace_txtAddressee").val().trim(), "look": $("#ctl00_contentPlace_txtSendCode").val().trim() }, //参数
success: function(data) {
//console.log(data);
response($.map(eval(data), function(item) { //使用该插件必须要用eval（）进行处理
//console.log(item);
return {
value: item.show, //赋值到控件上
result: item.show
}
}));
},
error: function(xhr) {
console.log("发生错误");
}
});
},
select: function(event, ui) {
var li = (ui.item.label).split("-");
$("#ctl00_contentPlace_txtAddressee").val(li[0]);
console.log(li[0]);
showName = li[0];
$("#ctl00_contentPlace_txtContactInfo").val(li[2]);
$("#ctl00_contentPlace_txtMailingAddress").val(li[1]);
showNames();//可以继续调用其他方法
}
});
});
function showNames() {
if (showName != null) {
setTimeout(function()
{
$("#ctl00_contentPlace_txtAddressee").val(showName); },100);
}
};
最终效果
至此，自动补全已经完成并满足需求，Autocomplete非常灵活，本文只是做了简单阐述和讲解
对Autocomplete插件更多参数和方法说明，请查阅 http://www.runoob.com/jqueryui/api-autocomplete.html
最新文章
- bzoj3380: [Usaco2004 Open]Cave Cows 1 洞穴里的牛之一(spfa+状压DP)
- JMeter学习（十）内存溢出解决方法
- C++混合编程之idlcpp教程Python篇(2)
- Java 通过JDBC查询数据库表结构(字段名称,类型,长度等)
- UVa1401 Remember the Word（DP+Trie树）
- nodejs学习笔记<一>安装及环境搭建
- delphi中计算指定日期是该月第几周的函数
- Ubuntu_wifi&pppoe
- ubuntu开机自启动脚本编写
- Python urllib2多进程共享cookies
- JVM内存管理(二)
- Python 更改cmd中的字色
- 学习DTD和Schema的几个例子
- B. Pyramid of Glasses
- Link带参数的Verilog模块（Design Compiler）
- JS文件中获取contextPath的方法
- 正则表达式中test,match,exec区别
- Ubuntu 上安装QTAV第三方视频库
- Html盛放媒体/视频标签
- gulp.src()内部实现探究