選擇任何項目后清除搜索詞並重新加載 Select2 輸入的所有項目

Question

我的頁面中有一個select2輸入文本字段，我在其中動態加載項目的輸入字段的焦點事件。

當我輸入一些搜索文本讓我們說“vai”時，結果項目被加載為“vaibhav1”、“vaibhav2”、“vaibhav3”、“vaibhav4”，重點放在第一個項目上。 如果我按回車鍵，它就會被選中。

現在我想要清除搜索詞“vai”，並且項目列表應該刷新顯示，其中包含所有剩余記錄，包括最后搜索的項目。 下面是我在$(document).ready(function)下的 javascript 代碼，用於 select2 輸入字段。

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

我嘗試在 select2js 文件中搜索以找到 function 或可用於此的標志，如果你們對此有任何想法，請幫助我。 如果我不清楚指定我的要求或方法，請告訴我。 提前致謝：）

Answer 1

不知何故，我找到了一個解決方法，我已經使用$(test).select2("search", "");清除了搜索字符串$(test).select2("search", ""); 每當輸入字段值更改時發出命令。

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

在這里， search是在select2.js文件中使用的搜索詞變量，每次用戶選擇或取消選擇列表中的項目時，我將其設置為空字符串。 它可以很好地滿足我的要求。

如果有人找到更好的解決方案，請告訴我，謝謝。

Answer 2

在 v4 中，我能夠使用以下代碼清除搜索字段。

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

Answer 3

除了@Enoch 回答之外，在將空值設置為搜索字段以重新加載選項后，我還必須觸發“輸入”事件。

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