HTML with Enhanced Code for JS

autocomplete.html

<div class="field">
  <label for="destination">
    <span class="field-label">Destination</span>
  </label>
  <select name="destination" aria-hidden="true" tabindex="-1" class="visually-hidden">
    <!-- options here -->
  </select>
<div class="autocomplete">
  <input aria-owns="autocomplete-options--destination" autocapitalize="none" type="text" autocomplete="off" aria-autocomplete="list" role="combobox" id="destination" aria-expanded="false">
  <svg focusable="false" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <!-- rest of SVG here -->
  </svg>
  <ul id="autocomplete-options--destination" role="listbox" class="hidden">
    <li role="option" tabindex="-1" aria-selected="false" data-option-value="1" id="autocomplete_1">France</li>
     <li role="option" tabindex="-1" aria-selected="true" data-option-value="2" id="autocomplete_2">Germany</li>
    <!-- more options here -->
  </ul>
<div aria-live="polite" role="status" class="visually-hidden">13 results available.</div>
</div>
</div>