Enhance a <select>

<form class="demo" onsubmit="event.preventDefault()">
  <div class="demo-field">
    <label class="demo-label" for="country">Country <span class="demo-hint">· try “emirat”, “+92”, “bsa”</span></label>
    <select id="country" name="country">
      <option value="">Pick a country</option>
      <optgroup label="Gulf">
        <option value="ae" data-description="+971" data-keywords="UAE|Emirates">United Arab Emirates</option>
        <option value="sa" data-description="+966" data-keywords="KSA">Saudi Arabia</option>
        <option value="qa" data-description="+974">Qatar</option>
        <option value="om" data-description="+968">Oman</option>
        <option value="kw" data-description="+965">Kuwait</option>
        <option value="bh" data-description="+973">Bahrain</option>
      </optgroup>
      <optgroup label="Asia">
        <option value="pk" data-description="+92" selected>Pakistan</option>
        <option value="in" data-description="+91">India</option>
        <option value="bd" data-description="+880">Bangladesh</option>
        <option value="lk" data-description="+94">Sri Lanka</option>
        <option value="ph" data-description="+63">Philippines</option>
      </optgroup>
      <optgroup label="Europe">
        <option value="gb" data-description="+44">United Kingdom</option>
        <option value="de" data-description="+49">Germany</option>
        <option value="ro" data-description="+40">Romania</option>
        <option value="ba" data-description="+387">Bosnia and Herzegovina</option>
      </optgroup>
    </select>
  </div>
  <div class="demo-kv">
    <div><span class="demo-hint">getValue()</span><br><b id="value">pk</b></div>
    <div><span class="demo-hint">form posts</span><br><b id="posts">country=pk</b></div>
  </div>
</form>

import { createSelect } from 'https://devix.pk/cdn/oss/select@1.0.0/index.js';

const select = document.getElementById('country');
createSelect(select, { searchable: true, clearable: true });

// The <select> is still the control, so the form and its events are untouched.
const show = () => {
  document.getElementById('value').textContent = JSON.stringify(select.value);
  document.getElementById('posts').textContent = [...new FormData(select.form)].map(([k, v]) => `${k}=${v}`).join(' ') || '—';
};
select.addEventListener('change', show);
show();

@import url('https://devix.pk/cdn/oss/select@1.0.0/select.min.css');