select2 :js插件,加载数据完成模糊搜索

1:前端:

              <td class="formValue">
                        <select id="cName" name="F_ParentId" class="form-control select2 required downList2">
                            <option value="0">请选择应用名</option>
                        </select>
                    <input id="newsId" name="newsId" style="display: none" type="text" class="form-control required" placeholder="" />

                </td>

jquery:   

       $(function () {

        //获取下拉框绑定的值
        $("#sel_menu3").bindSelect({
            url: "/AppMarket/CommonFunction/GetTreeSelectCodes",
        });
        i = $("#newsId").val();
        $('#sel_menu3').val(i).select2();

        $(document).ready(function () {
            $('#sel_menu3').select2();
        });

    })

2:后台

        [HttpPost]
        [HandlerAjaxOnly]
        [HandlerAuthorize]
        public ActionResult GetTreeSelectCodes(string name)
        {
            List<TreeSelectModel> list = DataLogic.GetCNameString();
            var treeList = new List<TreeSelectModel>();
            for (int i = 0; i < 5000; i++)
            {
                TreeSelectModel treeModel = new TreeSelectModel();
                treeModel.text = list[i].text;
                treeModel.parentId = "0";
                treeList.Add(treeModel);
            }
            list = list.Take<TreeSelectModel>(1000).ToList();

            return Content(list.TreeSelectJson());

}

其中,TreeSelectJson方法如下:

 public static string TreeSelectJson(this List<TreeSelectModel> data)
        {
            StringBuilder sb = new StringBuilder();
            sb.Append("[");
            sb.Append(TreeSelectJson(data, "0", ""));
            sb.Append("]");
            return sb.ToString();
        }
    
        private static string TreeSelectJson(List<TreeSelectModel> data, string parentId, string blank)
        {
            StringBuilder sb = new StringBuilder();
            var ChildNodeList = data.FindAll(t => t.parentId == parentId);
            var tabline = "";
            if (parentId != "0")
            {
                tabline = "  ";
            }
            if (ChildNodeList.Count > 0)
            {
                tabline = tabline + blank;
            }
            foreach (TreeSelectModel entity in ChildNodeList)
            {
                entity.text = tabline + entity.text;
                string strJson = entity.ToJson();
                sb.Append(strJson);
                sb.Append(TreeSelectJson(data, entity.id, tabline));
            }
            return sb.ToString().Replace("}{", "},{");
        }

    }

3:如果是动态获取数据,则是通过ajax

<script>
    $(document).ready(function () {
        $("#cName").select2({ placeholder: '请选择' });
        $(".downList2").select2({
            ajax: {
                type: 'POST',
                url: "/AppMarket/CommonFunction/GetTreeSelectCodes",
                dataType: 'text',
                delay: 250,
                data: function (params) {
                    return {
                        name: params.term,    // search term 请求参数
                        page: params.page,
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data.items,//itemList
                        pagination: {
                            more: (params.page * 2) < data.total_count
                        }
                    };
                },
                cache: true,
                success:function(data){
                    if (data != null && data != "") {
                        for (var i = 0; i < data.length ; i++) {
                            //var li = '<li><a href="javascript:void()" data-value="' + data[i].id + '">' + data[i].text + '</a></li>';
                            $("#cName").append("<option>" + data[i].text + "</option>");
                        }
                    }
                }
            },
            placeholder: '请选择',//默认文字提示
            language: "zh-CN",
            tags: true,//允许手动添加
            allowClear: true,//允许清空
            escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
            minimumInputLength: 1,
            formatResult: function formatRepo(repo) { return repo.text; }, // 函数用来渲染结果
            formatSelection: function formatRepoSelection(repo) { return repo.text; } // 函数用于呈现当前的选择
        });
    });
</script>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值