100 000 options
A windowed list: the DOM holds about sixteen rows however far you scroll, and search stays instant.
<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://www.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://www.devix.pk/cdn/oss/select@1.0.0/select.min.css');