当用户键入 Select2 输入时，在 DataTable 中进行实时搜索

问：

当我选择一个下拉框时，输入任何内容并搜索，我再次单击该框。我们应该能够立即输入，而不必单击任何额外的内容（例如实时搜索，键入任何值，select2 输入框以过滤数据表）

我正在使用“keyup”，但不起作用

JS代码

$(document).ready(function () {
    $(".select2").select2({
        placeholder: "Select",
        allowClear: false,
        closeOnSelect: false

    });
    var table;
    table = $('#agents').DataTable({
        ajax: '/designer_work/assets/json/agentsData.json',
        columns: [
            { data: 'id', visible: false, searchable: false, },
            { data: 'name', class: 'nowrap' },
            { data: 'city' },
            { data: 'air', 
              render: function (data, type) {
                console.log(data);
                if(data){
                    return `<span class='d-none'>${data}air</span><img src='/designer_work/assets/img/tick.png'/>`
                }
                return `<span class='d-none'>${data}air</span>`;
              }
            },
            { data: 'sea', 
              render: function (data, type) {
                if(data){
                    return `<span class='d-none'>${data}sea</span><img src='/designer_work/assets/img/tick.png'/>`
                }
                return `<span class='d-none'>${data}sea</span>`;
              }
            },
            { data: 'orig', 
              render: function (data, type) {
                if(data){
                    return "<img src='/designer_work/assets/img/tick.png'/>"
                }
                return "";
              }
            },
            { data: 'dest', 
              render: function (data, type) {
                if(data){
                    return "<img src='/designer_work/assets/img/tick.png'/>"
                }
                return "";
              }
            },
            { data: 'agent' },
            { data: 'contact' },
            { data: 'contact_title' },
            { data: 'phone' },
            { data: 'fax' },
            { data: 'email' },
        ],
       
        
    });

    $(".select2-search__field").on("keyup", function () {
      updateDataTable();
    });

    $('body').on('click', '.getSelect', function(){
        $('#agents_wrapper').css('visibility', 'visible');
        $('#agents_wrapper').css('height', 'auto');
        $('#agents_wrapper').css('overflow', 'unset');
        $('#agents').removeClass('invisible');
        $('#agent_icon').addClass('d-none');
        var country = $('#country').val();
        country = country == "" || country == 'all' ? '' : country;
        var mode = $('#mode').val();
        mode = mode == "" || mode == 'all' ? '' : mode;
        var port = $('#port').val();
        if(country != ''){
            table.column(1).search(country, true, false).draw();
        }else{
            table.column(1).search('', true, false).draw();
        }
        if(mode == 'air'){
            table.column(3).search('1air', true, false).draw();
        }else{
            table.column(3).search('', true, false).draw();
        }
        if(mode == 'sea'){
            table.column(4).search('1sea', true, false).draw();
        }else{
            table.column(4).search('', true, false).draw();
        }
        updateDataTable();
    });

function updateDataTable() {
  var country = $("#country").val() || "";
  var mode = $("#mode").val() || "";

  // Update DataTable based on Select2 input value
  table.column(1).search($(".select2-search__field").val(), true, false).draw();
  if (mode === "air") {
    table.column(3).search("1air", true, false).draw();
  } else {
    table.column(3).search("", true, false).draw();
  }
  if (mode === "sea") {
    table.column(4).search("1sea", true, false).draw();
  } else {
    table.column(4).search("", true, false).draw();
  }
}
    
     
    table.columns().iterator('column', function (ctx, idx) {
        $(table.column(idx).header()).append('<span class="sort-icon"/>');
    });
    table.responsive.recalc();
    $('div.title').html('');
    $('div.top .dataTables_filter input').after('<span class="tsicon"></span>');
    $('div.top .dataTables_length select').after('<span class="tseicon"></span>');
});

[HTML全文]

<div class="d-flex flex-column flex-lg-row justify-content-center align-items-start align-items-lg-center px-3 py-2">
    <div class="form-group col-12 col-xxl-4 col-lg-3 mb-2 mb-lg-0 d-flex flex-column flex-lg-row align-items-start align-items-lg-center pe-sm-22px">
        <label for="country" class="fs-6-5 text-black fw-500 pe-6px pb-1 pb-xl-0">Country</label>
        <select class="form-control fs-6-75 select-color filter-select select2 w-100" id="country">
            <option value="">Select Country</option>
            <option value="all">All</option>
            <option value="afghanistan">AFGHANISTAN (AF)</option>
            <option value="albania">ALBANIA (AL)</option>
            <option value="algeria">ALGERIA (DZ)</option>
        </select>
    </div>
    <div class="form-group d-flex flex-column flex-lg-row align-items-start align-items-lg-center col-12 col-lg-3 mb-2 mb-lg-0 pe-sm-22px">
        <label for="port" class="fs-6-5 text-black fw-500 pe-6px pb-1 pb-xl-0">Mode</label>
        <select class="form-control fs-6-75 select-color filter-select select2 w-100" id="port">
            <option value="">Select Port</option>
            <option value="all">All</option>
        </select>
    </div>
    <div class="form-group d-flex flex-column flex-lg-row align-items-start align-items-lg-center col-12 col-lg-3 pe-sm-22px mb-2 mb-lg-0">
        <label for="mode" class="fs-6-5 text-black fw-500 pe-6px pb-1 pb-xl-0">Port</label>
        <select class="form-control fs-6-75 select-color filter-select select2 w-100" id="mode">
            <option value="">Select Mode</option>
            <option value="all">All</option>
            <option value="air">Air</option>
            <option value="sea">Sea</option>
        </select>
    </div>
    <div class="form-group col-12 col-xl-2 col-md-3 ps-0">
        <button class="btn btn-success rounded-pill px-6 getSelect fw-500 fs-13px">
            GET SELECTED
        </button>
    </div>
</div>

我用

$(".select2-search__field").on("keyup", function () {
      updateDataTable();
    });

但不起作用

在 select2 上选择值后使用“keyup”结果以显示过滤器数据表。 我希望用户在 Select2 InputBox 上键入任何值，以对可移动行进行实时筛选