项目中用到autocomplete插件,但是插件的原有功能,不能满足项目全部需求所以修改了增加了以下几点功能:
1 粘贴文本自动加载数据
2 滚动条滚动到底部加载更多数据
3 与页面插件联动更新数据(清除缓存)
4 增加插件赋值给一个隐藏域,就可以得到文本和值 (做asp.net的用起来比较方便)
如果要启用滚动条加载更多数据
配置参数时加上
scroll:true,
pagingMore:true
在加载更多时请求的url参数会有一个page的参数
它标识当前请求的是第几页数据
ps(这个分页有一个小bug 假如总数据量正好是分页个数的倍数,当请求最后一页,它不能识别是否有下一页,所以可以再次请求下一页,由于时间原因我没有做改进,不影响正常使用)
调用代码
$(document).ready(function () {var $Text = //显示文本框var $Value = //存值文本域var $TxtBtnOrg = //联动控件1var $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 tmpData2select new JObject(new JProperty("o", o["ORG_NAME"]),new JProperty("k", o["NAME"]),//personNamenew JProperty("c", o["code"]),new JProperty("v", o["id"].ToString())//userID));return tmpJarr.ToString();}
由于代码我是刚写完没有测试,可以会有bug,希望大家用碰到了分享出来或发到我的Email:spyking945@sina.com
修改后的文件下载
，你说，你可以把它取下来吗？当我要取的时候，你淘气的躲开了，
