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

Question

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

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

我该如何防止这种情况发生？另外，我想 trim 发送前条款。

$(".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（在trim之后），如果长度<3:

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

我试图从 data 函数中获取 minimumInputLength 的值，但不能，因此您应该使用将此数字写入两次。

更新

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

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

Answer 2

你必须用你自己的函数覆盖传输方法并用参数做任何你想做的事然后决定通过 XHR 或 $.ajax 或 axios

处理请求

Answer 3

你可以重写 transport 选项， return null 验证失败，否则 return 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;
    },
}

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

Select2: Trim entered text and if empty - prevent sending Ajax requests

ajax

jquery

trim

jquery-select2-4

select2

更新