Reputation: 3090
I have a select2
Input text field in my page in which I am loading items dynamically on focus event of Input field.
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. 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. Below is my javascript code under $(document).ready(function)
for the select2 input field.
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. Let me know if I am not clear in specifying my requirements or approach. Thanks in advance :)
Upvotes: 5
Views: 7121
Reputation: 21
In addition to @Enoch answer, I had to trigger 'input' event after setting the empty value to the search field to reload the options.
$(test).change(function() {
$(this).parent().find('input.select2-search__field')?.val('').trigger('input');
})
Upvotes: 2
Reputation: 221
In v4, I was able to clear the search field with the following code.
$(test).change(function() {
$(this).parent().find('.select2-search__field').val("");
})
Upvotes: 2
Reputation: 3090
Somehow I found a workaround, I have cleared the search string using the $(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. It is working fine for my requirement.
Please let me know if anyone finds a better solution, thanks.
Upvotes: 7