在 jquery select2 中更改文本“搜索”答案

【问题标题】：Change text "searching" in jquery select2在 jquery select2 中更改文本“搜索”
【发布时间】：2019-09-13 14:06:01
【问题描述】：

我正在使用带有 ajax 选项的 select2，当 ajax 运行时，会出现一个文本“正在搜索”，直到 ajax 成功。我想更改此文本(see in attached image).

我的代码是：（参考来自https://select2.org）

   $("#employee_id").select2({
      ajax: {
        url: "get_store_data.php?type=employee_data",
        dataType: 'json',
        delay: 250,
        data: function (params) {
          return {
            phrase: params.term, // search term,
            store_name: jQuery("#store_name").val(),
            page: 1
          };
        },

        processResults: function (data, params) {
            // console.log(data);
          params.page = params.page || 1;

          return {
            results: data.map(function(item) {
                return {
                    id: item.name,
                    text: item.name
                  };
            }),
            pagination: {
              more: 0
            }
          };
        },
        placeholder: 'Search for a member id',
        cache: true
      },
      escapeMarkup: function (markup) { return markup; }, 
      minimumInputLength: 1
    });

【问题讨论】：

尝试在您的 HTML 代码中添加数据占位符

标签： jquery ajax jquery-select2

【解决方案1】：

如果理解正确，您希望更改等待时出现的文本（等待 Ajax 完成。该文本在完成后消失。默认情况下，文本是“正在搜索...”。下面的代码将将其更改为“其他...”。

$("#employee_id").select2({
    language: {
        searching: function() {
            return "Something else...";
        }
    },
    ajax: {
        url: "get_store_data.php?type=employee_data",
        // etc.
    }
}

请参阅有关 Translation objects 的 Select2 v4 文档。

【讨论】：

以防万一有人想将下面的“请输入 1 个或多个字符”消息更改为下拉菜单，请使用以下语言 inputTooShort 下的代码： function() { return 'Please Add More Text'; }

【解决方案2】：

使用这个。对你有帮助。

  $("#employee_id").select2({
    ajax: {
      type: 'get',
      url: 'get_store_data.php?type=employee_data',
      delay: 300,
      dataType: 'json',
      data: function (params) {
        return {
          search: params.term
        };
      },
      processResults: function (data) {
        return {
          results: $.map(data, function (obj) {
            return {
              id: obj.id,
              text: obj.text,
            };
          })
        };
      }
    },
    minimumInputLength: 2,
    placeholder: "Please Select",
    escapeMarkup: function (m) {
      return m;
    }
  });

【讨论】：

它不工作。您在 select2 调用之前获取数据，请在 select2 中使用 ajax

【解决方案3】：

我没有找到任何选项，所以编辑了 select2.min 文件。找到searching:function(){return"Searching"}}}) 并在此处更改文本。它对我有用。

改为：

searching:function(){return"Searching..."}}})

【讨论】：

您不应该编辑供应商代码，尤其是最小文件。如果您有要共享的代码，请向原始存储库发出拉取请求，或者将其分叉并按意愿进行修改，也许它对其他人也有用。但归根结底，更新语言属性就像@rohanc 所建议的那样，无需更改供应商代码。接受它作为最佳答案。

【解决方案4】：

我猜这是translation 问题。尝试包含翻译文件并编辑其中的文本。为ex en.js创建一个文件，放置代码：

    (function () {
if (jQuery && jQuery.fn && jQuery.fn.select2 && jQuery.fn.select2.amd) var e = jQuery.fn.select2.amd;
return e.define("select2/i18n/en", [], function () {
    return {
        errorLoading: function () {
            return "The results could not be loaded."
        }, inputTooLong: function (e) {
            var t = e.input.length - e.maximum, n = "Please delete " + t + " character";
            return t != 1 && (n += "s"), n
        }, inputTooShort: function (e) {
            var t = e.minimum - e.input.length, n = "Please enter " + t + " or more characters";
            return n
        }, loadingMore: function () {
            return "Loading more results…"
        }, maximumSelected: function (e) {
            var t = "You can only select " + e.maximum + " item";
            return e.maximum != 1 && (t += "s"), t
        }, noResults: function () {
            return "No results found"
        }, searching: function () {
            return "Searching…"
        }, removeAllItems: function () {
            return "Remove all items"
        }
    }
}), {define: e.define, require: e.require}})();

并使用您实际需要的翻译来编辑这些字符串。

不要忘记在 select2.js 之后包含它

您可能还需要设置 language: "en" 参数

【讨论】：