Пользовательский фильтр поиска DataTables не фильтрует таблицу в столбце, который содержит HTML

Question

У меня есть таблица данных, содержащая ссылку, чтобы показать более подробную информацию об элементе.

Я создал выпадающий список, который содержит только уникальные значения в этом столбце для быстрой фильтрации только для указанного c item.

Однако при выборе этого элемента таблица фильтруется, но строки не отображаются. Если я уберу лишние HTML в столбце, то выпадающий список будет работать нормально.

Параметры элемента select имеют правильные значения, и, похоже, нет ничего необычного и нет журналы ошибок консоли. Он просто не фильтруется с дополнительной ссылкой HTML.

I console.log(val) в событии onChange, и передается column.search() только строка.

Если я использую собственное встроенное поле поиска в DataTable, столбец фильтруется правильно даже с дополнительной ссылкой HTML. Только когда я использую выпадающий список, он не фильтруется (если он имеет ссылку HTML).

Кто-нибудь видит, что я могу делать неправильно?

Мой шаблон

<table id="MyDataTable" data-page-length="25" data-order='[[ 0, "asc"]]' class=" data-tables">
//..
    <td data-sort="{{$user->role_name}}">
        {{$user->role_name}}
        <a href="somelink.html?id={{$user->role_id}}">Details</a>
    </td>
</table>

Отображаемая часть

<td data-sort="Admin">Admin <a href="somelink.html?id=5">Details</a></td>

javascript генерирует это:

<select id="select_role" class="form-control">
  <option value="">Show All</option>
  <option value="Regular User">Regular User</option>
  <option value="Admin">Admin</option>
  <option value="Super Admin">Super Admin</option>
  <option value="Enterprise">Enterprise</option>
</select>

Javascript

let dtable = $("#MyDataTable").DataTable();
let dropdown = $("#select_role");
let column = dtable.column(3); // The index of the column that has the data

dropdown.append('<option value="">Show All</option>');

// Get the unique values in the column and strip HTML
column.data().unique().each(function (d, j) {
    //Strip any extra HTML that comes with that field, like styling.
    let content = d.replace(/(<([^>]+)>)/ig, "");
    dropdown.append('<option value="' + content + '">' + content + '</option>');
});

dropdown.on('change', function () {
    let val = $.fn.dataTable.util.escapeRegex($(this).val());
    console.log(val);
    column.search(val ? '^' + val + '$' : '', true, false).draw();
});