100 000 options

<form class="demo" onsubmit="event.preventDefault()">
  <div class="demo-field">
    <label class="demo-label" for="sku">SKU <span class="demo-hint">· 100,000 of them</span></label>
    <select id="sku" name="sku"></select>
  </div>
  <div class="demo-kv">
    <div><span class="demo-hint">mounted in</span><br><b id="mounted">—</b></div>
    <div><span class="demo-hint">option elements in the DOM</span><br><b id="nodes">—</b></div>
  </div>
</form>

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

const options = Array.from({ length: 100000 }, (_, i) => ({
  value: `SKU-${i}`,
  label: `SKU-${String(i).padStart(6, '0')}`,
  description: i % 3 === 0 ? 'in stock' : 'backorder',
}));

const started = performance.now();
createSelect(document.getElementById('sku'), { options, searchable: true, placeholder: 'Search 100,000 SKUs' });
document.getElementById('mounted').textContent = `${Math.round(performance.now() - started)} ms`;

const nodes = document.getElementById('nodes');
setInterval(() => (nodes.textContent = String(document.querySelectorAll('.dxs-option').length)), 300);

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