实现可搜索下拉框中的“全选”功能：仅选择当前显示的选项

<div id="dropdownSearch" class="bg-white rounded-lg shadow w-60" style="z-index: 999;">
    <div class="p-3">
        <label for="input-group-search" class="sr-only">Search</label>
        <div class="relative">
            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
            </div>
            <input type="text" id="myInput" onkeyup="filterFunction()" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 " placeholder="Search user">
        </div>
    </div>
    <ul id="getMerchant" class="h-48 px-3 pb-3 overflow-y-auto text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownSearchButton">
        <li>
            <div class="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                <input id="checkbox-item-14" onchange="selectAll()" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
                <label for="checkbox-item-14" id="select_all" class="w-full ml-2 text-sm font-medium text-gray-900 rounded dark:text-gray-300">Select All</label>
            </div>
        </li>
        <li>
            <div id="myDropdown" class="flex items-center p-2 rounded hover:bg-gray-100 ">
                <input id="merchant" name="merchant[]" type="checkbox" value="foo" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 ">
                <label for="merchant-checkbox" id="merchant_name" class="w-full ml-2 text-sm font-medium text-gray-900 rounded ">foo</label>
            </div>
        </li>
        <li>
            <div id="myDropdown" class="flex items-center p-2 rounded hover:bg-gray-100 ">
                <input id="merchant" name="merchant[]" type="checkbox" value="bar" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 ">
                <label for="merchant-checkbox" id="merchant_name" class="w-full ml-2 text-sm font-medium text-gray-900 rounded ">bar</label>
            </div>
        </li>
        <li>
            <div id="myDropdown" class="flex items-center p-2 rounded hover:bg-gray-100 ">
                <input id="merchant" name="merchant[]" type="checkbox" value="baz" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 ">
                <label for="merchant-checkbox" id="merchant_name" class="w-full ml-2 text-sm font-medium text-gray-900 rounded ">baz</label>
            </div>
        </li>
    </ul>
</div>

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  console.log(filter);
  div = document.getElementById("getMerchant");
  a = div.getElementsByTagName("li");
  // 过滤时，跳过包含 "Select All" 的第一个 li 元素
  for (i = 1; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    // 使用 classList.toggle 和 hidden 类来显示/隐藏元素
    a[i].classList.toggle('hidden', txtValue.toUpperCase().indexOf(filter) === -1);
  }
}

function selectAll() {
  // 选择所有未被隐藏的 checkbox
  var ele = document.querySelectorAll("li:not(.hidden) > div > input[type=checkbox]");
  var checked = $('#checkbox-item-14').is(':checked');
  for (var i = 0; i < ele.length; i++) {
    ele[i].checked = checked;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com"></script>