[JQuery] Select2分頁

 最近專案上遇到一個問題，大致上就是下拉選單的內容有五萬多筆，此時如果我們將五萬多筆資料都長在頁面的下拉選單上，瀏覽器基本上就crash了，因此只能用分頁搭配關鍵字查詢的方式生成選單，這樣最好實作的方式就是使用 JQuery  Select2 的分頁。

實作:

1.建立測試用資料(下拉選單資料)

        /// 建立測試資料
        private List BuildTestData()
        {
            var result = new List();
            for (var i = 0; i < 100; i++)
            {
                result.Add("Test" + i);
            }
            return result;
        }

2.Controller建立一個GetDatas Action 供Aajax取得篩選後的下拉選單資料

        /// 取得資料
        [HttpPost]
        public ActionResult GetDatas(string keyword, int? pageSize, int? page)
        {
            var totalCount = 0;
            page = page ?? 1;
            pageSize = pageSize ?? 10;
            int currentpage = (((int)page - 1) * (int)pageSize);
            var datas = SearchTestData(keyword);
            totalCount = datas.Count();
            var list = datas.Skip(currentpage).Take((int)pageSize);
            return Json(new
            {
                result = list,
                Counts = totalCount
            });

        }       
        /// 依關鍵字 查詢 測試資料
        private List SearchTestData(string keyword)
        {
            var kw = keyword.Trim();
            var testData = BuildTestData();
            var result = testData.Where(x => x.Contains(kw)).ToList();
            return result;
        }

3.view 上 建立 測試的 <select>下拉選單

 <select id="TestSelect2"

            name="TestSelect2"

            class="TestSelect2"

            style="width:40%;" tabindex="-1"

            aria-hidden="true"

            href="@Url.Action("GetDatas")"

            onchangehref="@Url.Action("GetDatas")">

    </select>

4.javaScript

  $(document).ready(function () {
            InitSelect();
        });
       /**
        * Select 初始化
        * */
        function InitSelect() {
            // Select2TwStyle();
            var CompanypageSize = 10;
            $(".TestSelect2").each(function () {
                $(this).select2({
                    language: "zh-TW",
                    allowClear: true,
                    ajax: {
                        type: "POST",
                        url: $(this).attr('href'),
                        dataType: 'json',
                        delay: 250,
                        global: false,
                        data: function (params) {
                            params.page = params.page || 1;
                            return {
                                keyword: params.term ? params.term : '',
                                pageSize: CompanypageSize,
                                page: params.page
                            };
                        },
                        processResults: function (data, params) {
                            params.page = params.page || 1;
                            var options = GetData(data);
                            return {
                                results: options,
                                pagination: {
                                    more: (params.page * CompanypageSize) < data.Counts
                                }
                            };
                        },
                        cache: true
                    },
                    placeholder: {
                        id: '',
                        text: '--請選擇--'
                    },
                    width: '100%',
                    minimumInputLength: 1,
                });
                $(this).data('select2').$dropdown.find(':input.select2-search__field').attr('placeholder', '輸入名稱、代碼');
            })

        }

        /**
         * 取得回傳資訊
         * @param data 回傳資訊
         */
        function GetData(data) {
            var list = data.result;
            var options = [];
            for (var i = 0; i < list.length; i++) {
                var option = { id: list[i], text: list[i] };
                options.push(option);
            }
            return options;
        }

        /**
         * Set Select2 to Taiwan Style
         * */
        function Select2TwStyle() {
            (function () { if (jQuery && jQuery.fn && jQuery.fn.select2 && jQuery.fn.select2.amd) var e = jQuery.fn.select2.amd; return e.define("select2/i18n/zh-TW", [], function () { return { inputTooLong: function (e) { var t = e.input.length - e.maximum, n = "請刪掉" + t + "個字元"; return n }, inputTooShort: function (e) { var t = e.minimum - e.input.length, n = "請再輸入" + t + "個字元"; return n }, loadingMore: function () { return "載入中…" }, maximumSelected: function (e) { var t = "你只能選擇最多" + e.maximum + "項"; return t }, noResults: function () { return "沒有找到相符的項目" }, searching: function () { return "搜尋中…" } } }), { define: e.define, require: e.require } })();
        }

5.結果

*這樣一來在輸入關鍵字之前，並不會載入拉選單，可以提升效能

*輸入關鍵字後的結果