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

Posted 2023-05-07

【中文标题】在 jquery select2 中更改文本“搜索”

【英文标题】：Change text "searching" in 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 代码中添加数据占位符

【参考方案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" 参数