<section class="demo-section">
  <h2>Advanced select</h2>

  <div style="max-width: 320px">
    <input
      id="demo-advanced-select"
      type="text"
      class="input"
      placeholder="Choose a country"
      autocomplete="nope"
    >
  </div>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      if (window.VMKUIKit?.advancedSelect) {
        window.VMKUIKit.advancedSelect(
          document.getElementById("demo-advanced-select"),
          {
            ua: "Ukraine",
            pl: "Poland",
            de: "Germany",
            fr: "France",
            es: "Spain",
            it: "Italy",
            us: "United States",
            ca: "Canada"
          },
          "No countries found"
        );
      }
    });
  </script>
</section>