开篇语

因为项目中需要用到一个自动补全的功能,功能描述:

需求一:新增收件人的时候,自动下拉显示出数据库中所有的收件人信息(显示的信息包括:姓名-收件地址-联系方式)

需求二:选中一个值得时候,分别赋值到对应文本框(收件人输入框中赋值 姓名,联系方式输入框中赋值 手机号,收件地址输入框中赋值 地址)

解决需求一(因本人比较懒,所以直接选用了一个比较方便的插件: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

Autocomplete 自动补全(Webform实战篇)的更多相关文章

  1. jquery.autocomplete自动补全功能

    项目实例: 一:js //SupplierAutoComplete.js $().ready(function () { $("#txtSupplier").autocomplet ...

  2. jQuery AutoComplete 自动补全

    jQuery.AutoComplete是一个基于jQuery的自动补全插件.借助于jQuery优秀的跨浏览器特性,可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器. 特 ...

  3. Pig autocomplete 自动补全

    在pig的grunt环境下,按TAB键可以自动补全命令,用户可以添加自己的补全信息. 在conf目录下创建autocomplete文件,添加如下内容: hdfs://vm1:8020/   在grun ...

  4. Bootstrap Typeahead/Jquery autocomplete自动补全

    使用Bootstrap Typeahead 组件: Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,自动填充. 效果如图所示: 实现方式: 1.引入 ...

  5. jquery autocomplete自动补全

    简单用法: $(function(){ var data = "the People's Republic of China".split(" "); $(&q ...

  6. WinForm AutoComplete 输入提示、自动补全

    一.前言 又临近春节,作为屌丝的我,又要为车票发愁了.记得去年出现了各种12306的插件,最近不忙,于是也着手自己写个抢票插件,当是熟悉一下WinForm吧.小软件还在开发中,待完善后,也写篇博客与大 ...

  7. jquery autocomplete实现读取sql数据库自动补全TextBox

    转自我本良人 原文 jquery autocomplete实现读取sql数据库自动补全TextBox 项目需要这样子一个功能,其他部门提的意见,只好去实现了哦,搞了好久才弄出来,分享一下. 1.前台页 ...

  8. gocode+auto-complete搭建emacs的go语言自动补全功能

    上篇随笔记录了在emacs中使用go-mode和goflymake搭建了go语言的简单编程环境(推送门),今天来记录一下使用gocode+auto-complete配置emacs中go语言的自动补全功 ...

  9. autocomplete实现联想输入,自动补全

    jQuery.AutoComplete是一个基于jQuery的自动补全插件.借助于jQuery优秀的跨浏览器特性,可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器. 特 ...

随机推荐

  1. 识别快递单号(2) - 加载图片到canvas

    传送门: 识别快递单号(1) - 图像处理   转载请注明出处: http://www.cnblogs.com/zaiyuzhong/p/load-image-to-canvas.html 上篇说到我 ...

  2. bzoj1001最小割

    听说最大流过不去??? dinic果然神了,1000,000的点都能过(主要是比较稀疏) #include <cstdio> #define INF 9223372036854775807 ...

  3. 开启PHP的伪静态

    1.检测Apache是否支持mod_rewrite 通过php提供的phpinfo()函数查看环境配置,通过Ctrl+F查找到“Loaded Modules”,其中列出了所有 apache2handl ...

  4. WINFORM 输出txt文件

    SaveFileDialog saveFile1 = new SaveFileDialog(); saveFile1.Filter = "文本文件(.txt)|*.txt"; sa ...

  5. 2015-12-21(box-sizing:border-box)

    最近新学了一个方法box-sizing:border-box,可以忽略margin,padding,border等所要占的位置,比如,你在做响应式网页时,当你所做的网页宽度是符合当前电脑屏幕宽度时,但 ...

  6. Unity3d刚体Rigidbody与碰撞检测Collider

    做了一个碰撞的小Demo,用一个球去撞击一堵墙,结果在球和墙都设置了刚体和碰撞体的情况下,球穿过了墙.移动球的位置,球有时能穿过墙,有时会被墙阻挡. 对于球穿过了墙,这个问题,在网上找了一下答案,基本 ...

  7. 李洪强iOS经典面试题156 - Runtime详解(面试必备)

    李洪强iOS经典面试题156 - Runtime详解(面试必备)   一.runtime简介 RunTime简称运行时.OC就是运行时机制,也就是在运行时候的一些机制,其中最主要的是消息机制. 对于C ...

  8. Map的keySet和entrySet

    /*Map集合的两种 取出方式 * 1.keySet() * 2.entrySet() * */ //定义一个学生类 重写了equals.hashcode三个方法,实现了comparable接口并覆盖 ...

  9. 代码-->发呆

    代码,敲着敲着,就发呆了. 其实安安静静敲代码,是一种享受.开着不快不慢的音乐,徜徉在代码的世界里,忘记了时间的存在. 原本备忘录中提醒我13点看书,一小时又一小时的延后,已经不记得自己按了多少次一小 ...

  10. sass/scss 和 less的区别

    一. Sass/Scss.Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量 ...