搜索/过滤列表在chrome / firefox上有效，但在Safari中无效（HTML和JavaScript）

问：

我有以下代码，除了 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";
                }
            }
        }

JavaScript html 谷歌浏览器 Safari

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>

搜索/过滤列表在chrome / firefox上有效，但在Safari中无效（HTML和JavaScript） - 在Safari上启用JavaScript

Search / Filter a list works on chrome / firefox but not in safari (HTML & JavaScript) - JavaScript enabled on Safari

评论

评论