防止使用 select2 加载数据，直到满足 minlength

Posted 2023-05-07

【中文标题】防止使用 select2 加载数据，直到满足 minlength

【英文标题】：Prevent loading of data with select2 until minlength is met

【发布时间】：2018-09-06 09:15:28

【问题描述】：

我不确定我是否以正确的方式进行此操作，但如果您有任何建设性的意见可以帮助我朝着正确的方向前进，请分享。我已经被困在这个问题上很长一段时间了。

我有以下 select2 控件，它正在为该表的一个字段加载整个表。 select2 有一个名为 minimumInputLength 的函数，它似乎仍然完整地加载表，而不是查询前三个字符。分页工作正常，如下 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 的最小输入长度之前不加载并且仍然可以搜索？我必须等待整个表加载后才能搜索并返回结果。

【参考方案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,
);

【参考方案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,
);

【参考方案3】：

我认为 minimumInputLength 仅在您尚未加载选项（ajax 加载）时才有效。在您的代码中，选择在开头加载了选项，因此 minimumInputLength 将不起作用。

因此，如果您在页面加载时填充所有选项，minimumInputLength 将不会受到影响。

希望解决方案是这样的。

【讨论】：

所以你是说在 ajax 中加载数据而不是我的选择？你碰巧有类似的例子吗？我认为我与 ajax 一起使用的解决方案应该执行 ajax 加载。

这个小提琴的例子，也是上面应该表现的那样，但搜索永远不会发生，为什么会这样？ jsfiddle.net/jgf5fkfL/78。它只是说明正在搜索....但没有返回任何结果。

只是说您可以选择填充在 html 文件中的选项。正如您在此处看到的select2.org/data-sources/ajax html 中的选择必须是这样的<select class="js-data-example-ajax"></select> 并且它将在最小数据参数出现时执行搜索。

我认为你的 jsfiddle 没有执行搜索，因为 ajax 调用返回 403（正如你在资源管理器调试器中看到的那样），所以它没有返回任何结果。

我发现 403 对 csfr_token 很宽松，但我仍然无法让它正常工作。我也为它创建了这个线程。 ***.com/questions/49541397/…