Dropdown filter - with input tag.
Dropdown filter - with input tag.

Have a problem with dropdown filters when input tag is present.
Have made this clean example that shows my problem
https://live.datatables.net/piqidoqo/2785/edit
The first dropdown doesn't show the right values in dropdown because of the input.
Then I have tried to change my code and insert this instead
column.data().unique().sort().each(function(d, j) {
var re = new RegExp(/<.?input.+value\s*=\s*"(.+?)".+>/gmi);
if (re.test(d)) {
select.append('<option value="' + $(d).attr('value') + '">' + $(d).attr('value') + '</option>');
} else {
select.append('<option value="' + d + '">' + d + '</option>');
}
});[https://live.datatables.net/piqidoqo/2785/edit](https://live.datatables.net/piqidoqo/2785/edit "https://live.datatables.net/piqidoqo/2785/edit")
Then the dropdown show the right text, but multible of course, the "unique" is still looking on the full input, and if I choose something then it shows nothing, again because that the filter is using the full text and not my "value".
I feeling that I am going out the wrong direction.
Answers
Here is one option:
https://live.datatables.net/piqidoqo/2786/edit
You had an extra set of quotes in the select.append() statement. This option uses
column().index()
to determine which column contains the inputs. However you can continue to use your re.test() method if you wish. Similarly it gets the input value to build the option.The main problem is the use of regex matching with this search:
My example uses orthogonal data to set the filter value to the input value via
columns.render
. Another option would be to check the column to choose whether to use the regex search above or use the defaultcolumn.search()
, ie, smart search. Or create a more specific search string for that column.Kevin