我如何正确过滤iPad上正在使用Chrome的Safari上的图像列表

Question

当有人在搜索字段中键入时，我有一个试图过滤的图像列表。

这些图像都以这种格式：

<a href="/" class="link">
<figure class="card">
    <img src="img.png" alt="Alt Title" />
    <figcaption id="cap" class="figure-caption d-none">This is the searchable text</figcaption>
  </figure>

搜索字段是：

 <input class="form-control mr-sm-2 searchbox-input" type="search" placeholder="Search" aria-label="Search" onkeyup="buttonUp();" required>

JavaScript

    <script>
    var buttonUp = () => {
        const input = document.querySelector(".searchbox-input");
        const cards = document.getElementsByClassName("link");
        let filter = input.value
        for (let i = 0; i < cards.length; i++) {
            let title = cards[i].querySelector("#cap");
            if (title.innerText.toLowerCase().indexOf(filter) > -1) {
                cards[i].classList.remove("d-none")
            } else {
                cards[i].classList.add("d-none")
            }
        }
    }
</script>

在Chrome/Firefox上可以正常工作，但是一旦您在iPad上键入iPad，它就会过滤所有内容。我是要以错误的方式过滤它，还是我缺少简单的东西？