项目中用到autocomplete插件,但是插件的原有功能,不能满足项目全部需求所以修改了增加了以下几点功能:
1 粘贴文本自动加载数据
2 滚动条滚动到底部加载更多数据
3 与页面插件联动更新数据(清除缓存)
4 增加插件赋值给一个隐藏域,就可以得到文本和值 (做asp.net的用起来比较方便)
如果要启用滚动条加载更多数据
配置参数时加上
scroll:true,
pagingMore:true
在加载更多时请求的url参数会有一个page的参数
它标识当前请求的是第几页数据
ps(这个分页有一个小bug 假如总数据量正好是分页个数的倍数,当请求最后一页,它不能识别是否有下一页,所以可以再次请求下一页,由于时间原因我没有做改进,不影响正常使用)
调用代码
$(document).ready(function () {
var $Text = //显示文本框
var $Value = //存值文本域
var $TxtBtnOrg = //联动控件1
var $UserGroup = //联动控件2
$Text.autocomplete("../Ajax/AutoCompleteAjax.ashx", {
minChars: 0,
type: "POST",
extraParams: {//数据请求时的参数
type: "自己定义请求类型",
OrgIDs: function () { if($TxtBtnOrg) return $TxtBtnOrg.val() },//联动控件取值13.
groupID:function () { return $UserGroup.val() }//联动控件取值
},
width: $Text.width(),
autoFill: false,
scroll:true,
pagingMore:true,
matchContains: "word",
max:100,
mustMatch: true,
dataType: "json",
valueControl: $Value,
formatItem: function (row, i, max) {
return "<span style=\"display:block;\" title=\"" + (row.c ==null ? "" : row.c) + " (" + row.o + ")\">" + row.k + "</span>";
},
formatMatch: function (row, i, max) {
return row.k + " " + row.v;
},
formatResult: function (row, value) {
return row.k;
},
setValue: function (data) {
//在此给隐藏域赋值
var data = data.data || data;
var value = data.v || "";
$Value.val(value);
if (value != "") $Value.change();
//调用值改变事件
},
parse: function (data) {
var parsed = [];
for (var i = 0; i < data.length; i++) {
var row = data[i];
if (row) {
parsed[parsed.length] = {
data: row,
value: row.k,
result: this.formatResult && this.formatResult(row)
};
}
}
return parsed;
}
});
//用户ID反查Name值 (可以通过初始化隐藏域值进行初始化文本,当然也可以在后台把两个控件都赋值),因需求而定
if($Value.val()!="" && $Text.val()=="") $.post("../Ajax/AutoCompleteAjax.ashx",
{ "type":"getNameByID","gettype": "<%=this.AutoCompleteType%>","id":$Value.val()},
function(data){console.log(data); if(data&& data.name) $Text.val(data.name) },"json");
});
function Control_Reset() { //当然这里的控件是不存在的,取控件应该不用我来教了
$Text.val("").flushCache();//清除缓存列表()
$Value.val("");
}
后台返回数据
private string GetAutoCompleteUser(string type)
{
string keys = request["q"];
int count = Convert.ToInt32(request["limit"]);//这个限定返回条数我们可以理解为分页大小
string tmpOrgIDs_ = request["OrgIDs"];
int page = 1;
int.TryParse(request["page"], out page); //分页的页码(由于我在第一次请求时没有值page所以初始值为1)
DataTable dt = GetDtData(type);
var tmpData = dt.AsEnumerable();
var tmpData2 = tmpData.DistinctBy(c => c.Field<int>("ID")).Where(c => c.Field<string>("NAME").Contains(keys)).ToList();
if (count != 0 && page != 1)//这里count如果为0 返回所有符合条件的数据
{
tmpData2 = tmpData2.Skip((page - 1) * count).Take(count).ToList();
}
else if (count != 0)
{
tmpData2 = tmpData2.Take(count).ToList();
}
JArray tmpJarr = new JArray(from o in tmpData2
select new JObject(
new JProperty("o", o["ORG_NAME"]),
new JProperty("k", o["NAME"]),//personName
new JProperty("c", o["code"]),
new JProperty("v", o["id"].ToString())//userID
));
return tmpJarr.ToString();
}
由于代码我是刚写完没有测试,可以会有bug,希望大家用碰到了分享出来或发到我的Email:spyking945@sina.com
修改后的文件下载
http://download.csdn.net/detail/spyking945/8550033