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

页面导航:首页 > 网络编程 > JavaScript > jquery.autocomplete 插件扩展滚动条加载更多

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

来源: 作者: 时间:2016-02-02 09:58 【

项目中用到autocomplete插件,但是插件的原有功能,不能满足项目全部需求所以修改了增加了以下几点功能:1 粘贴文本自动加载数据2 滚动条滚动到底部加载更多数据3 与页面插件联动更新数

项目中用到autocomplete插件,但是插件的原有功能,不能满足项目全部需求所以修改了增加了以下几点功能:

1 粘贴文本自动加载数据

2 滚动条滚动到底部加载更多数据

3 与页面插件联动更新数据(清除缓存)

4 增加插件赋值给一个隐藏域,就可以得到文本和值 (做.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  + row.k + ;  
        },  
        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(ID)).Where(c => c.Field(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();
    }

 

 

 

 
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<