Change text "searching" in jquery select2

Question

I am using select2 with ajax option, and when ajax runs, a text "searching" appearing until ajax get success. I want to change this text(see in attached image).

My code is:(reference from 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
    });

Tapestry

try with add data-placeholder in your HTML code – Salpingotomy

Answer 1

If understand you correctly, you want to change the text that appears whilst you are waiting (for the Ajax to complete. That text disappears after it completes. By default the text is "Searching...". The code below will change it to "Something else...".

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

See the Select2 v4 documentation concerning Translation objects.

Engen

Just in case anyone wants to change "Please Type 1 or more characters" message below to the dropdown use below code under the language inputTooShort: function() { return 'Please Add More Text'; } – Pounce

Answer 2

Use This. It's Help For You.

  $("#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;
    }
  });

Robbirobbia

it's not working. you are getting data before select2 calling, use ajax inside select2 – Tapestry

Answer 3

I did not find any options so edited select2.min file. find searching:function(){return"Searching"}}}) and change text here. It's working for me.

Changed to:

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

Tapestry

You should never edit the vendor code, especially not the min file. If you have code to share, do a pull request to the original repository or fork it and modify on will, maybe it will be useful for somebody else as well. But at the end of the day, updating the language property does the trick as suggested by @Engen , no need to change the vendor code. Accept that as the best answer. – Gander

Answer 4

This is a translation issue I guess. Try to include translation file and edit the text inside it. Create a file for ex en.js, place the code:

    (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}})();

And edit those strings with translation you actually need.

Do not forget to include it right after the select2.js

And you probably will need to set language: "en" parameter too

Xenolith