防止使用 select2 加載數據，直到滿足 minlength

Question

我不確定我是否以正確的方式解決這個問題，但是如果您有任何建設性的意見可以幫助我朝着正確的方向前進，請分享。 我已經被困在這個問題上很長一段時間了。

我有以下 select2 控件，它正在為該表的一個字段加載整個表。 有一個名為 minimumInputLength 的 select2 函數，它似乎仍然完整地加載表，而不是查詢前三個字符。 分頁正常工作，如這個 fiddle.js 所示： http : //jsfiddle.net/jgf5fkfL/66/

$.fn.select2.amd.require(
  ['select2/data/array', 'select2/utils'],
  function (ArrayData, Utils) {
    function CustomData($element, options) {
      CustomData.__super__.constructor.call(this, $element, options);
    }

    function contains(str1, str2) {
      return new RegExp(str2, "i").test(str1);
    }

    Utils.Extend(CustomData, ArrayData);

    CustomData.prototype.query = function (params, callback) {
      if (!("page" in params)) {
        params.page = 1;
      }

      var pageSize = 50;
      var results = this.$element.children().map(function (i, elem) {
        if (contains(elem.innerText, params.term)) {
          return {
            id: [elem.innerText, i].join(""),
            text: elem.innerText
          };
        }
      });

      callback({
        results: results.slice((params.page - 1) * pageSize, params.page * pageSize),
        pagination: {
          more: results.length >= params.page * pageSize
        }
      });
    };

    $(".js-example-basic-multiple").select2({
      ajax: {},
      minimumInputLength: 3,
      allowClear: true,
      width: "element",
      dataAdapter: CustomData
    });
  });

問題是我的觀點是在渲染 html 時為活躍的學生加載整個表格。

def multisearch(request):

    userid = ADMirror.objects.filter(student_status_id = 1).values('studentntname').values_list('studentntname', flat=True)

    args = {'userid':userid}

    return render(request, 'multisearch.html',args)

我使用以下命令呈現 html 和 select2 控件：

  {% block extra_js %}
      {{ block.super }}
      {{ form.media }}
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js" type="text/javascript"></script>


        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
  <script src= "{% static '/search/user_select2.js' %}" type="text/javascript"></script>

               <div class="col"><h4 style="margin-top: 0"><strong>Student ID Search</strong></h4><select class="js-example-basic-multiple"  value = "{{ userid }}" style="width: 1110px" required>
               {% for user in userid %}
               <option value="{{ user }}"> {{ user }}</option>
               {% endfor %}
             </select>

現在我知道如何防止在我的過濾器中加載數據，我使用以下方法執行此操作，但是如何使其與我的視圖和 select2 的最小輸入長度一起使用：

#  doesn't load data on the initial load of the search.html page
    def __init__(self, *args, **kwargs):
        super(StudentFilter, self).__init__(*args, **kwargs)
        # at startup user doen't push Submit button, and QueryDict (in data) is empty
        if self.data == {}:
            self.queryset = self.queryset.none()

我還嘗試使用 select2 和 javascript 的以下選項失敗，因為數據似乎不可搜索：

$(document).ready(function () {
    $('.js-example-basic-multiple').select2({
      minimumInputLength: 3,
      allowClear: true,
      placeholder: {
        id: -1,
        text: 'Enter the Student id.',
      },
      ajax: {
        type: 'POST',
        url: '',
        contentType: 'application/json; charset=utf-8',
        async: false,
        dataType: 'json',
        data: function (params) {
            return "{'searchFilter':'" + (params.term || '') + "','searchPage':'" + (params.page || 1) + "'}";
          },

        processResults: function (res, params) {
            var jsonData = JSON.parse(res.d);
            params.page = params.page || 1;
            var data = { more: (jsonData[0] != undefined ? jsonData[0].MoreStatus : false), results: [] }, i;
            for (i = 0; i < jsonData.length; i++) {
              data.results.push({ id: jsonData[i].ID, text: jsonData[i].Value });
            }

            return {
              results: data.results,
              pagination: { more: data.more,
              },
            };
          },
      },
    });

  });

在滿足 select2 的最小輸入長度並且仍然可以搜索之前，如何讓我的數據不加載？ 在搜索和返回結果之前，我必須等待整個表加載完畢。

Answer 1

肯定來不及回應。 但萬一它幫助別人。 我讓我的工作方式如下：

$("#select-company").select2({
    ajax: {
        url: "/en/entreprises.json", //URL for searching companies
        dataType: "json",
        delay: 200,
        data: function (params) {
            return {
                search: params.term, //params send to companies controller
            };
        },
        processResults: function (data) {
            return {
                results: data
            };
        },
        cache: true
    },
    placeholder: "Start typing",
    minimumInputLength: 3,
});

Answer 2

$("#selctor").select2({
    placeholder: ".................. choos ....................",
    //dropdownCssClass: 'smalldrop',
    width: '100%',
    ajax: {
        url: "/search RUL",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                q: params,
                // page: params.page
            };
        },
        results: function (data, search) {
            return {
                results: data.items
            };
        },
        cache: true
    },
    templateResult: function (item) {
        if (item.loading) return item.text;
        return item.text;
    },
    escapeMarkup: function (markup) { return markup; },
    minimumInputLength: 3,
});

Answer 3

我認為 minimumInputLength 只有在您尚未加載選項（ajax 加載）時才有效。 在您的代碼中，選擇在開始時加載了選項，因此 minimumInputLength 將不起作用。

因此，如果您在頁面加載時填充所有選項， minimumInputLength 將不會產生影響。

希望解決方案是這樣的。