How to load data in Select2 from ajax call instead of getting all data at first

Hi,

I am trying to add Select2 in my Js-grid to select multiple values, I was successfully able to implement that part. What I am doing is getting all the data which needs to be shown in select2 while loading grid, the select2 has 20000 rows in it, so it is taking time to load while inserting new row or editing any row, the row creation is taking time.

I am expecting there should be a way through which I will enter 3 or 4 characters and get the data for those matching characters using AJax instead of having all the data.

Below is my code for Select2 `Select2Field.prototype = new NumberField({ align: "left", valueType: "number", //width:"20%",

        itemTemplate: function (value) {
            var items = this.items,
                valueField = this.valueField,
                textField = this.textField,
                imgField = this.imgField,

                resultItem;
            var result = [];
            for (index = 0; index < value.length; index++) {
                matterId = value[index];

                if (valueField) {
                    resultItem = $.grep(items, function (item, index) {
                        return item[valueField] === matterId;
                    })[0] || {};
                }
                else
                    resultItem = items[value];
                result.push((textField ? resultItem[textField] : resultItem));
            }

            // result = (textField ? resultItem[textField] : resultItem);
            return $.makeArray(result).join(", ");
            //  return (result === undefined || result === null) ? "" : result;
        },

        insertTemplate: function () {
            if (!this.inserting)
                return "";

            var $result = this.insertControl = this._createSelect();
            this._applySelect($result, this);
            return $result;
        },

        editTemplate: function (value) {
            if (!this.editing)
                return this.itemTemplate(value);

            var $result = this.editControl = this._createSelect();
            (value !== undefined) && $result.val(value);
            this._applySelect($result, this);
            return $result;
        },

        insertValue: function () {
            value = [];
            this.insertControl.find("option:selected").map(function () {
                value.push(this.selected ? $(this).val() : null);
            });
            return value;
        },

        editValue: function () {
            value = [];
            this.editControl.find("option:selected").map(function () {
                value.push(this.selected ? $(this).val() : null);
            });
            return value;
        },

        _applySelect: function (item, self) {
            setTimeout(function () {
                var selectSiteIcon = function (opt) {
                    var img = '';
                    try {
                        img = opt.element.attributes.img.value;
                    } catch (e) { }
                    if (!opt.id || !img)
                        return opt.text;
                    var res = $('<span><img src="' + img + '" class="img-flag"/> ' + opt.text + '</span>');
                    return res;
                }
                item.select2({
                    //width: self.width,
                    templateResult: selectSiteIcon,
                    templateSelection: selectSiteIcon,
                    tags: false,
                    minimumInputLength: 4
                });
            });
        },

        _createSelect: function () {
            var $result = $("<select>").prop({
                "multiple": true, "placeholder": "Please Select"
            }),
                valueField = this.valueField,
                textField = this.textField,
                imgField = this.imgField,
                selectedIndex = this.selectedIndex;

            $.each(this.items, function (index, item) {
                var value = valueField ? item[valueField] : index,
                    text = textField ? item[textField] : item,
                    img = imgField ? item[imgField] : '';

                var $option = $("<option>")
                    .attr("value", value)
                    .attr("img", img)
                    .text(text)
                    .appendTo($result);

                $option.prop("selected", (selectedIndex === index));

            });

            return $result;
        }
    });

    jsGrid.fields.select2 = jsGrid.Select2Field = Select2Field;`

In this I have set minimum length as 4, now user is entering 4 characters and this select2 already have full list so it is filtering data. But the daya I have is huge that is why it is taking time.

What I want is when user enters 4 characters,then it should go to database and get data accordingly and in the edit mode whatever data is saved for this field will come and then user can enter new records after entering 4 characters.

Below is my load data `loadData: function (filter) { var results; var totalCount; $.ajax({ url: "/Matter/GetMatterNotes", type: "GET", async: false, data: { pageIndex: filter.pageIndex, pageSize: filter.pageSize, sortField: filter.sortField, sortOrder: filter.sortOrder, mtrId: mtrId },

                dataType: "json",
                success: function (data) {
                    results = data.lsttmprMatterList;
                    totalCount = data.totalCount;
                    TimekeeprList = data.lstMatters;
                },
                error: function (jqXHR, exception) {
                    console.log(jqXHR);
                }
            });
            return {
                data: results,
                itemsCount: totalCount
            };
        }`

Below is the field of my grid in which I am using select2 { name: "SelectedTimekeeper", title: "Timekeepers", width: 200, type: "select2", align: "left", items: TimekeeperData, textField: "Description", valueField: "Id" },

I hope my question is clear and you can help me in this.

tabalinas / jsgrid

How to load data in Select2 from ajax call instead of getting all data at first #1286