Dropdown filter - with input tag.

Dropdown filter - with input tag.

BojerBojer Posts: 1Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 20,992Questions: 26Answers: 4,887

    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:

    column.search(val ? '^' + val + '$' : '', true, false).draw();
    

    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 default column.search(), ie, smart search. Or create a more specific search string for that column.

    Kevin

Sign In or Register to comment.