I am working on a project where I have a select list with a filter functionality. Currently, the filter searches for substrings within the options, but I would like to modify it so that it only searches for exact matches based on the selected data.
For example, if the select list of column index 2 contains the options “New” , I saw rows with “New” and some rows with “NRND (Not Recommended for New Design)” , the filter should not return any results of “NRND (Not Recommended for New Design)” because is not an exact match for “New”, it was a substring of “New”.
columns = jQuery.parseJSON(data);
table.columns([38]).every(function (i) {
var column = this;
$(column.header()).append("");
var select = $('<select style="max-width:80px"><option value="">--</option</select>')
.appendTo($(column.header()))
.on('change', function ({
filter_values[column.index()] =$(this).val();
table.search(filter_values.toString() ? '' + filter_values.toString() + '' : '', true, false).draw();
});
select.append('<option value="0">0.X</option>');
select.append('<option value="1">1.X</option>');
select.append('<option value="2">2.X</option>');
select.append('<option value="3">3.X</option>');
});
$(column.header()).append("<br>");
var select = $('<select style="max-width:80px"><option value="">--</option></select>')
.appendTo($(column.header()))
.on('change', function () {
var selectedValue = $(this).val();
filter_values[column.index()] = selectedValue;
// Use the search method to filter and display the data
table.search(filter_values.toString() ? '' + filter_values.toString() + '' : '', true, false).draw();
});
// Populate the select options
columns[column.index()].forEach(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>');
});
});