搜索/过滤列表适用于 chrome / firefox，但不适用于 safari（HTML 和 JavaScript）- 在 Safari 上启用 JavaScript

Question

我有以下代码，可以在除 Safari 之外的任何浏览器中完美运行，显示足球俱乐部列表。之后我实现了一个搜索栏，用 javascript 过滤列表。

Chrome 中的过滤功能有效。 Safari 仅显示俱乐部列表，在过滤框中键入内容时不执行任何操作。一切都在 safari 的设置方面进行了尝试，并且使用了多台计算机。

也许有人知道出了什么问题......

<input type="text" id="filter" oninput="filterDropdown()" placeholder="Type to filter" >
                                
<select id="dropdown" name="club_name" class="form-select bg-custom" size="17" aria-label="Size 10 select example" style="background-color: #B9B4C7;" >
                                <!-- <option selected></option> -->
                                {% for name in df["name"] %}
                                <option class="list bg-custom" data-league="{{ df[df['name']==name]['league'].values[0] }}" value="{{ name }}" {% if loop.first %}selected{% endif %}>{{ name }}</option>
                                {% endfor %}
</select>

JavaScript

function filterDropdown() {
            // Get input value
            var input, filter, dropdown, options, i, txtValue;
            input = document.getElementById("filter");
            filter = input.value.toUpperCase();
            dropdown = document.getElementById("dropdown");
            options = dropdown.getElementsByTagName("option");

            // Loop through all options, hide those that don't match the filter
            for (i = 0; i < options.length; i++) {
                txtValue = options[i].text;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    options[i].style.display = "";
                } else {
                    options[i].style.display = "none";
                }
            }
        }

Answer 1

并非所有浏览器都以相同的方式处理表单字段的样式：HTML Select 元素。

首先我重构了你的例子。并不能解决问题。

document.forms.form01.filter.addEventListener('input', e => {
  let form = e.target.form;
  let filter = e.target.value.toUpperCase();
  [...form.club_name.options].forEach(option => {
    option.classList.add('hidden');
    if (option.text.toUpperCase().startsWith(filter)) {
      option.classList.remove('hidden');
    }
  });
});

option.hidden {
  display: none;
}

<form name="form01">
  <input type="text" name="filter" placeholder="Type to filter">
  <select id="dropdown" name="club_name" class="form-select bg-custom" size="5" aria-label="Size 10 select example" style="background-color: #B9B4C7;">
    <option class="list bg-custom" value="1">Abc</option>
    <option class="list bg-custom" value="2">Abcde</option>
    <option class="list bg-custom" value="3">Abcdefg</option>
  </select>
</form>

然后是一个可能有帮助的示例，其中所有选项都被删除并添加到 DOM 中。所有选项都存储在一个数组中，可以使用函数

refresh_options()

，先删除然后插入选项。

const options = [{text:'Abc',value:1},{text:'Abcde',value:2},{text:'Abcdefg',value:2}];

refresh_options(document.forms.form01.club_name, options);

document.forms.form01.filter.addEventListener('input', e => {
  let form = e.target.form;
  let text = e.target.value.toUpperCase();
  let filteredoptions = options.filter(opt => opt.text.toUpperCase().startsWith(text));
  refresh_options(form.club_name, filteredoptions);
});

function refresh_options(select, filteredoptions){
  select.textContent = '';
  filteredoptions.forEach(opt => {
     let optelm = document.createElement("option");
     optelm.value = opt.value;
     optelm.text = opt.text;
     select.add(optelm);
  });
}

<form name="form01">
  <input type="text" name="filter" placeholder="Type to filter">
  <select id="dropdown" name="club_name" class="form-select bg-custom" size="5" aria-label="Size 10 select example" style="background-color: #B9B4C7;">
  </select>
</form>