Question

我正在使用带有Ajax的Select2来加载远程数据（建议）。

一切正常，但有一个问题：当用户只输入空格时（通过按空格键） - 正在发送Ajax请求。

我该怎样防止这种情况？另外，我想在发送之前修改条款。

$(".js-data-example-ajax").select2({
  placeholder: "Select... ",
  minimumInputLength: 3,
  ajax: {
    url: "/my-site/tags",
    dataType: 'json',
    data: function (params) {
        return {
            q: params.term
        };
    },
    processResults: function (data) {
        return {
            results: data
        };
    },
    cache: true
}

编辑：

我忘了提到我已经尝试过这样的事情：

        data: function (params) {
            if (params.term.trim().length  < 2) {
                return;
            }
            return {
                q: $.trim(params.term)
            };
        },

并且仍然发送了GET（Ajax）请求。

Answer 1

您可以使用data函数检查搜索term的长度（修剪后），如果长度＆lt; 3：

data: function (params) {
  if (params.term.trim().length  < 3) {
    throw false;
  }
  return {
    q: params.term.trim()
  };
},

我试图从minimumInputLength函数中获取data的值但是不能，所以你应该使用这个数字写两次。

更新

我能够停止请求的唯一方法是throw函数内的data异常。我知道它可能不是一个好选择，但它确实有用。

我还找到了关于这个问题的公开票：https://github.com/select2/select2/issues/1637 所以我想还没有这样的选择。

Answer 2

您可以重写transport选项，验证失败时返回null，否则返回original function code

它对我有用。

{
    data: function (params) {
        return {
            q: params.term
        };
    },
    transport: function (params, success, failure) {
        if(params.data.q.trim().length < 3) {
            return null;
        }
        //the original function code:
        var $request = $.ajax(params);

        $request.then(success);
        $request.fail(failure);

        return $request;
    },
}

Answer 3

您必须通过自己的函数来覆盖传输方法，并对参数进行任何所需的操作，然后决定通过XHR或$ .ajax或axios处理请求

Select2：修剪输入的文本，如果为空 - 阻止发送Ajax请求

3 个答案:

更新