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

p8ekf7hl  于 2023-09-29  发布在  Java
关注(0)|答案(3)|浏览(121)

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

ruyhziif

ruyhziif1#

不知何故,我找到了一个解决办法,每当输入字段值更改时,我都使用$(test).select2("search", "");命令清除搜索字符串。

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

这里,searchselect2.js文件中使用的搜索项变量,每次用户选择或取消选择列表中的项目时,我将其设置为空字符串。对于我的要求,它工作得很好。
如果有人找到更好的解决方案,请告诉我,谢谢。

hpxqektj

hpxqektj2#

在v4中,我能够用下面的代码清除搜索字段。

$(test).change(function() {
  $(this).parent().find('.select2-search__field').val("");
})
2wnc66cl

2wnc66cl3#

除了@以诺answer之外,我还必须在为搜索字段设置空值后触发“input”事件以重新加载选项。

$(test).change(function() {
   $(this).parent().find('input.select2-search__field')?.val('').trigger('input');
})

相关问题