Expressjs Autocomplete Project

Hey I want to make a autocomplete search bar with Nodejs. But what I stack over there is I cannot convert html codes to pug ones. I mean I get the error.Here is my code exampe: Also my reference is = "https://www.youtube.com/watch?v=1iysNUrI3lw"

const search = document.getElementById('tags');
const matchlist = document.getElementById('match-list');
const searchStates = async searchText => {
  const res = await fetch('../public/js/testdata.json');
  const state = await res.json();

  let mathces = states.filter(state => {
    const regex = new RegExp(`^${searchText}`, 'gi');
    return state.name.match(regex) || state.abbr.match(regex);
  });
    if(searchText.length == 0) {
      matches = []
      matchlist.innerHTML = '';
    }

    outputHtml(mathces);

    console.log(matches);
};
const outputHtml = mathces => {
  if(matches.length > 0) {
    const html = matches.map(match => `
   <div class="card card-body mb-1>
   <h4>${math.name} (${math.abbr}) <span class="text-primary">${match.capital}</span></h4>
   <small>Lat:${match.lat} / Long:${match.long}
   </div>
    `)
    .join('');

    matchlist.innerHTML = html;
  }
}

search.addEventListener('#tags', () => searchStates (search.value))

I dont know how to convert this to pug. My error is = ReferenceError: document is not defined I couldnt understand why it is not being happen. Because in the youtoube video he does not get any errors. Can someone help to me pls ? Can someone help to me to solve this issue ? If you do I will be very happy,thanks for your efford.