jquery.autocomplete 插件扩张滚动条加载更多

jquery.autocomplete 插件扩展滚动条加载更多

项目中用到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

jquery.autocomplete 插件扩张滚动条加载更多

相关推荐