I am fetching data & my pagination buttons seem to be working. I have created a searchCharacters function which filters the data based on the search input, so if i search ‘man’ i expect all characters that include ‘man’ to be displayed. But the issue i am having is the searchCharacter function is only filtering data from the ‘currentPage’ and not the entire dataset of ~1500 odd marvel characters, how would i go about achieving this?

import './style.css'
import javascriptLogo from './javascript.svg'
import viteLogo from '/vite.svg'
import { setupCounter } from './counter.js'
import md5 from 'md5'
let resultsPerPage = 10;
let offset = null
let currentPage = 1
const publicKey =  '****';
const privateKey =  '****';
let timestamp = new Date().getTime()
let hashVal =  md5(timestamp+privateKey+publicKey);
const searchInput = document.getElementById('search-input')
const button = document.getElementById('submit-search');
const main = document.getElementById('main')

const getMarvelCharacters = async function(){

  const url = `http://gateway.marvel.com/v1/public/characters?`
  const searchparam  =  new URLSearchParams({
    ts : timestamp,
    apikey: publicKey,
    hash:hashVal,
    limit: resultsPerPage,
    offset: offset
  }) 
  const response = await fetch(url + searchparam)
  try {
    if(!response.ok){
      throw new Error('network response is not okay')
    }
    const data = await response.json()
    const totalNumOfChar = data.data.total
    console.log(totalNumOfChar)
  let characters  = data.data.results

  displayCharacters(characters)
  console.log(characters)
    return characters

  } catch (error) {
    console.error('There was an error:', error)
  }
}

const displayCharacters = function(characters){
  main.innerHTML = ''
  let markup = ''
  characters.forEach(character =>{

    markup +=
    `<div id="results-container">
    <div class="image-container">
    <img src="${character.thumbnail.path}.${character.thumbnail.extension}" alt="">  
    </div>
    <div class="character-info">
    <h2 class="Character-name">${character.name}</h2>
    <p class="character-info">${character.description}</p> 
    </div>
    </div>
    ` 
  });
  main.insertAdjacentHTML('beforeend', markup) 
  
}
const getPaginationButtonResults = function(){
  const next = document.querySelector('.right')
  const prev = document.querySelector('.left')
  next.addEventListener('click', async (event)=>{
    event.preventDefault()
    currentPage++
    offset+=resultsPerPage
    const characters = await getMarvelCharacters()
    displayCharacters(characters)
  })
  prev.addEventListener('click', async (event)=>{
    event.preventDefault()
    currentPage--
    if(currentPage>0){
      offset-=resultsPerPage
      const characters = await getMarvelCharacters()
      displayCharacters(characters)
    }
  })
}
const searchCharacters =  async function(){

  button.addEventListener('click', async (event)=>{
    event.preventDefault()
    const searchTerm  = searchInput.value.toLowerCase()
    const characters =  await getMarvelCharacters()
    

    const filterChar = characters.filter((character)=>{
      return character.name.toLowerCase().includes(searchTerm)
    })
    displayCharacters(filterChar)
    return filterChar
  })
}
  getMarvelCharacters()
  getPaginationButtonResults()
  searchCharacters()