How do I correctly filter a list of images on Safari on iPad that is working on Chrome

I have a list of images that I am trying to filter when someone types in a search field.

The images are all in this format:

<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>

The search field is:

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

And the javascript is

    <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>

This works fine on Chrome/Firefox, but as soon as you type on ipad it filters everything. Am I going about filtering this in the wrong way or is there something simple I'm missing?