增强DataTables键盘可访问性：重置后如何精确设置筛选器焦点

<p>Name:
  <span id="dropdown1">
    <select>
      <option value="">select me</option>
      <!-- options populated dynamically -->
    </select>
  </span>
</p>

$('#test').on('click', function() {
  table.search('').columns().search('').draw();
  $(".dropdown1").focus(); // 错误：无法选中或聚焦
});

$(document).ready(function() {
  var table = $('#example').DataTable({
    responsive: true,
    searching: true,
    columnDefs: [{
      target: 6,
      visible: false,
      searchable: true,
    }],
    dom: 'ilfrt<"left-col"B><"toolbar"><"right-col"p>',
    fnInitComplete: function() {
      $('div.toolbar').html('<p>Custom tool bar!</p>');
    },
    buttons: [{
        extend: 'excelHtml5',
        className: 'mybutton',
        exportOptions: {
          columns: ':visible'
        }
      },
      // 'colvis'
    ],
  });
  buildSelect(table);
  table.on('draw', function() {
    buildSelect(table);
  });

  $('#myInput').on('keyup', function() {
    table.search(this.value).draw();
  });

  // 修正后的重置按钮点击事件
  $('#test').on('click', function() {
    table.search('').columns().search('').draw();
    // 使用精确的jQuery选择器聚焦到第一个下拉菜单
    $("#dropdown1 > select").focus();
  });
});

function buildSelect(table) {
  var counter = 0;
  table.columns([0, 1, 2]).every(function() {
    var column = table.column(this, {
      search: 'applied'
    });
    counter++;
    var select = $('<select><option value="">select me</option></select>')
      .appendTo($('#dropdown' + counter).empty())
      .on('change', function() {
        var val = $.fn.dataTable.util.escapeRegex(
          $(this).val()
        );

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

    if (column.index() === 0) {
      var filteredNames = column.data().unique().toArray();
      ['Garrett', 'Test1', 'Ashton'].forEach((d) => {
        if (filteredNames.includes(d)) {
          select.append('<option value="' + d + '">' + d + '</option>');
        }
      });
    } else {
      column.data().unique().sort().each(function(d, j) {
        select.append('<option value="' + d + '">' + d + '</option>');
      });
    }

    // The rebuild will clear the existing select, so it needs to be repopulated
    var currSearch = column.search();
    if (currSearch) {
      select.val(column.data().unique().toArray().find((e) => e.match(new RegExp(currSearch))));
    }
  });
}