选择任何项目后清除搜索词并重新加载 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');