Template help

[TerrePorter]

I am trying to create a dropdown using a template for the elements in the drop down.

The code

<div x-data="{ 
              init() {
                var box = document.getElementById('search');
                box.addEventListener('input', function() {

                  this.countries = COUNTRIES.filter(COUNTRIES => COUNTRIES.title.toLowerCase().startsWith(this.value) == true );

                console.log(this.countries);

              });
              this.countries = COUNTRIES;
              },
              }">
  <ul >
    <template x-for="(country, index) in countries" :key="index">
      <li>        
        <span x-text="country.title"></span>
        <span x-text="country.value"></span>
      </li>
    </template>
  </ul>

<input type="search" name="search" id="search" autocomplete="off" class="focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md h-10 p-2" placeholder="Search a country">
</div>

Countries is a long list of countries.

const COUNTRIES = [
  {    
    title: 'Afghanistan',
    value: 'AF',
  },
  {
    title: 'Albania',
    value: 'AL',
  },...

I set up a codepen and the search function works but the template is never shown.

[TerrePorter]

I was able to figure out the problems.