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

【问题标题】：Clear search term and reload all items of Select2 input after selecting any item选择任何项目后清除搜索词并重新加载 Select2 输入的所有项目
【发布时间】：2015-01-15 10:21:17
【问题描述】：

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

【问题讨论】：

与其在源代码中搜索，不如试试docs？有一个名为 allowClear 的选项，但我不知道它是否是您想要的，因为不清楚您对 list should be refreshed displayed containing all remaining records including last searched items 的含义。
@DontVoteMeDown，基本上我希望用户能够仅使用键盘选择项目（客户要求），他可以选择第一个项目。接下来应该删除搜索文本并显示所有剩余的项目。我也浏览了文档。
@DontVoteMeDown，文档说 allowClear 将选择框的值重置回占位符（仅在指定占位符时可用）。这不是我想要的。我希望选中的项目保持选中状态，选择后只清除搜索文本。

标签： javascript jquery jquery-select2

【解决方案1】：

不知何故，我找到了一种解决方法，每当输入字段值发生变化时，我都会使用$(test).select2("search", ""); 命令清除搜索字符串。

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

这里，search 是 select2.js 文件中使用的搜索词变量，每次用户选择或取消选择列表中的项目时，我将其设置为空白字符串。它可以很好地满足我的要求。

如果有人找到更好的解决方案，请告诉我，谢谢。

【讨论】：

有谁知道在select2的v4中清除搜索结果的方法吗？
这也适用于我的一个错误。在取消选择/删除所选选项后，搜索词（即 HTML）继续出现在页面上。我在文档中使用 ajax 选择数据：select2.org/programmatic-control/…
@Chad 看到我的回答。

【解决方案2】：

在 v4 中，我可以使用以下代码清除搜索字段。

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

【讨论】：

所选答案提交我的表单。这个答案非常有效。