Clear search term and reload all items of Select2 input after selecting any item

Question

I have a select2 Input text field in my page in which I am loading items dynamically on focus event of Input field.

When I enter some search text let's say 'vai' then the result items are loaded as 'vaibhav1', 'vaibhav2', 'vaibhav3', 'vaibhav4' with focus on first item. If I press enter key it gets selected.

Now what I want is to clear the search term 'vai' and the items list should be refreshed displayed containing all remaining records including last searched items. Below is my javascript code under $(document).ready(function) for the select2 input field.

function format(item) { return item.name; };
// select2 multiple select feature for Impact Area initialization
var test = $('#impactArea'); 
$(test).select2({
    formatSelection: format,
    formatResult: format ,
    multiple: true,
    width: "612px",
    height: "50px",
    closeOnSelect : false,
    maximumSelectionSize : 20,
    ajax: { 
        type: "GET",
        url: "/progressManagement/testingIssue/impactAreaList",
        dataType: 'json',
        data: function (term) {
          return { q: term };
       },
        results: function (data) {
          return {results: data};
        }
       } ,
       initSelection: function(element, callback) { 
           var rangeList=$('#impactArea').val();
           var id=$(element).val();
            if (id!=="") {
            $.ajax("/progressManagement/testingIssue/selectedImpactArea", {
                data: { rangeList: rangeList },
                dataType: "json"
            }).done(function(data) { 
                callback(data); 
            });
            }
        } 
});

I tried searching in the select2js file to find a function or a flag which could be used for this, please help me if you guys have any ideas about this. Let me know if I am not clear in specifying my requirements or approach. Thanks in advance:)

Answer 1

Somehow I found a workaround, I have cleared the search string using the $(test).select2("search", ""); command whenever the Input field value changes.

$(test).change(function() {
    $(test).select2("search", "");
});

Here, search is the search term variable used in select2.js file which I set to blank string every time user selects or deselects the item in the list. It is working fine for my requirement.

Please let me know if anyone finds a better solution, thanks.

Answer 2

In v4, I was able to clear the search field with the following code.

$(test).change(function() {
  var searchfield = $(test).parent().find('.select2-search__field');
  searchfield.val("");
})

Answer 3

In addition to @Enoch answer, I had to trigger 'input' event after setting the empty value to the search field to reload the options.

$(test).parent().find('input.select2-search__field')?.val('').trigger('input');