It sounds basic, but I am stuck with select2 input search, the search works perfectly but backspace key doesn't, I don't want multi select. Below is my code
function projID(id, tdDate, empKey){debugger;
$("#"+id).select2({
minimumInputLength: 3,
placeholder: "Put some text...",
allowClear : true,
//tags: true,
selectOnClose: true,
initSelection: function(element, callback) { debugger;
},
ajax: {
url:'getProjectsForTimecardException.action?empKey='+empKey+'&tdDate='+tdDate+'&auditLogsKeyword=' + menuData.globKeyword,
contentType: 'application/json',
dataType: 'json',
data: function(params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data) {
$("#"+id).empty().trigger('change');
return {
results: $.map(data, function (item) {debugger;
return {
text: item.value,
id: item.key
}
})
};
},
cache: false
},
//templateResult: formatResult
});
}
I am using the verion 4.1.0-rc.0.
Thanks in Advance.
I tried all the possible things available but still no luck
$(document).ready(function() {
$('#activityId').select2({placeholder: "Put some text...",
allowClear : true});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<select style="width: 100% !important; border: 1px solid #0B3A42; box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset; height: 35px;border-radius: 5px 5px 5px 5px;" id="activityId">
<option>--Hii --</option></select>