选择任何项目后清除搜索词并重新加载 Select2 输入的所有项目

Question

我的页面中有一个 select2 输入文本字段，我在其中根据输入字段的焦点事件动态加载项目。

当我输入一些搜索文本时，比方说 'vai' 然后结果项加载为 'vaibhav1'、'vaibhav2'、'vaibhav3'、'vaibhav4' 并带有焦点在第一项上。如果我按回车键，它就会被选中。

现在我想要的是清除搜索词 'vai' 并且应该刷新显示包含所有剩余记录（包括上次搜索的项目）的项目列表。下面是我在 $(document).ready(function) 下用于 select2 输入字段的 javascript 代码。

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 文件中搜索以找到可用于此的函数或标志，如果你们对此有任何想法，请帮助我。如果我不清楚我的要求或方法，请告诉我。提前致谢:)

Answer 1

不知何故我找到了一个解决方法，每当输入字段值更改时，我都使用 $(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("");
})

选择任何项目后清除搜索词并重新加载 Select2 输入的所有项目

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

javascript

jquery

jquery-select2