[英]Clear search term and reload all items of Select2 input after selecting any item
I have a select2
Input text field in my page in which I am loading items dynamically on focus event of Input field.我的页面中有一个
select2
输入文本字段,我在其中动态加载项目的输入字段的焦点事件。
When I enter some search text let's say 'vai' then the result items are loaded as 'vaibhav1', 'vaibhav2', 'vaibhav3', 'vaibhav4' with focus on first item.当我输入一些搜索文本让我们说“vai”时,结果项目被加载为“vaibhav1”、“vaibhav2”、“vaibhav3”、“vaibhav4”,重点放在第一个项目上。 If I press enter key it gets selected.
如果我按回车键,它就会被选中。
Now what I want is to clear the search term 'vai' and the items list should be refreshed displayed containing all remaining records including last searched items.现在我想要清除搜索词“vai”,并且项目列表应该刷新显示,其中包含所有剩余记录,包括最后搜索的项目。 Below is my javascript code under
$(document).ready(function)
for the select2 input field.下面是我在
$(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);
});
}
}
});
I tried searching in the select2js file to find a function or a flag which could be used for this, please help me if you guys have any ideas about this.我尝试在 select2js 文件中搜索以找到 function 或可用于此的标志,如果你们对此有任何想法,请帮助我。 Let me know if I am not clear in specifying my requirements or approach.
如果我不清楚指定我的要求或方法,请告诉我。 Thanks in advance:)
提前致谢:)
Somehow I found a workaround, I have cleared the search string using the $(test).select2("search", "");
不知何故,我找到了一个解决方法,我已经使用
$(test).select2("search", "");
清除了搜索字符串$(test).select2("search", "");
command whenever the Input field value changes.每当输入字段值更改时发出命令。
$(test).change(function() {
$(test).select2("search", "");
});
Here, search
is the search term variable used in select2.js
file which I set to blank string every time user selects or deselects the item in the list.在这里,
search
是在select2.js
文件中使用的搜索词变量,每次用户选择或取消选择列表中的项目时,我将其设置为空字符串。 It is working fine for my requirement.它可以很好地满足我的要求。
Please let me know if anyone finds a better solution, thanks.如果有人找到更好的解决方案,请告诉我,谢谢。
In v4, I was able to clear the search field with the following code.在 v4 中,我能够使用以下代码清除搜索字段。
$(test).change(function() {
var searchfield = $(test).parent().find('.select2-search__field');
searchfield.val("");
})
In addition to @Enoch answer, I had to trigger 'input' event after setting the empty value to the search field to reload the options.除了@Enoch 回答之外,在将空值设置为搜索字段以重新加载选项后,我还必须触发“输入”事件。
$(test).parent().find('input.select2-search__field')?.val('').trigger('input');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.