🔍 ArkSearchableSelect · by Immanuel R

A zero‑dependency JavaScript library that turns any standard <select> into a searchable dropdown. All styles are injected automatically – no external CSS files needed. The original <select> is kept as a hidden value holder and dispatches change events.

⚡️ Live demos below – they use the latest API. Open your browser console to inspect events.

📘 API Reference

Method	Description
`new ArkSearchableSelect(selector)`	Creates a searchable select from an existing `<select>`. The original select is hidden and cleared – it becomes an event proxy.
`.setData(items)`	Replaces all internal options with an array of `{value, text}`. Use this to load data initially or after a reset.
`.addItem(value, text, position)`	Adds a single item. `position` can be a number (index), `'last'` (default), or `'alpha'` (alphabetical order).
`.removeItem(value)`	Removes all items with the given `value`. If the selected item is removed, the selection is cleared.

🧪 Interactive Demos

Basic usage – setData()

A select populated with fruit options using setData.

const basic = new ArkSearchableSelect('#basic-select');
basic.setData([
  { value: 'apple', text: 'Apple' },
  { value: 'banana', text: 'Banana' },
  { value: 'cherry', text: 'Cherry' },
  { value: 'date', text: 'Date' }
]);

Dynamic items – addItem / removeItem

Planets – use the buttons to modify the list.

const planets = new ArkSearchableSelect('#dynamic-select');
planets.setData([
  { value: 'mercury', text: 'Mercury' },
  { value: 'venus', text: 'Venus' },
  { value: 'earth', text: 'Earth' },
  { value: 'mars', text: 'Mars' }
]);

planets.addItem('jupiter', 'Jupiter', 'last');
planets.addItem('ceres', 'Ceres', 'alpha');
planets.addItem('saturn', 'Saturn', 2);
planets.removeItem('earth');

🧹 Clear button in action

Type something in the search box – a ✕ button appears. Click it to clear instantly.

const clearDemo = new ArkSearchableSelect('#clear-demo-select');
clearDemo.setData([
  { value: 'red', text: 'Red' },
  { value: 'green', text: 'Green' },
  { value: 'blue', text: 'Blue' },
  // ... more colors
]);

👂 Event Listening

The original <select> fires a change event whenever a new item is selected. Listen to it like this:

Selected value: (none)

const eventDemo = new ArkSearchableSelect('#event-demo-select');
eventDemo.setData([...]);

document.querySelector('#event-demo-select').addEventListener('change', (e) => {
  document.getElementById('selected-value').textContent = e.target.value;
});

🚀 Massive dataset – 1,000,000 items

Virtual scrolling makes it possible to browse a million options smoothly.

const huge = new ArkSearchableSelect('#huge-select');
const items = Array.from({ length: 1000000 }, (_, i) => ({
  value: `id-${i}`,
  text: `Item ${i}`
}));
huge.setData(items);

📦 Installing & using

Copy the library script into your project (the code inside ark-select-single.js). Then, for any <select> you want to enhance, create a new instance and load your data:

<select id="mylist"></select>

<script src="path/to/ark-select-single.js"></script>
<script>
  const mySelect = new ArkSearchableSelect('#mylist');
  mySelect.setData([
    { value: '1', text: 'Option 1' },
    { value: '2', text: 'Option 2' }
  ]);

  // Later add or remove items:
  mySelect.addItem('3', 'Option 3', 'alpha');
  mySelect.removeItem('1');
</script>

⚙️ Method details

setData(items) – expects an array of objects with value and text properties.
addItem(value, text, position) – position can be a number (0‑based), 'last' (default), or 'alpha' (case‑insensitive alphabetical by text).
removeItem(value) – removes all items whose value matches.

🧹 Clear button

The search input includes a built‑in clear button (✕) that appears when you type. Clicking it clears the search and refocuses the input.

🎨 Styling overrides

All styles are injected, but you can override them using these CSS classes:

.ark-searchable-select-container – outer wrapper
.ark-searchable-select-display – selected value box
.ark-searchable-select-dropdown – dropdown panel
.ark-searchable-select-search-wrapper – search wrapper (sticky)
.ark-searchable-select-search – search input
.ark-searchable-select-clear – clear button
.ark-searchable-select-options – options container
.ark-searchable-select-option – each option
.ark-searchable-select-option.selected – selected option
.ark-searchable-select-option.highlighted – keyboard‑highlighted option

Example override:

.ark-searchable-select-container {
  max-width: 400px;
  font-family: 'Segoe UI', sans-serif;
}
.ark-searchable-select-option.selected {
  background-color: #4f46e5;
  color: white;
}

🌐 Browser support

Modern browsers (Chrome, Firefox, Safari, Edge). Internet Explorer is not supported.

ArkSearchableSelect · crafted by Immanuel R · raj@immanuel.co · @ir-dev