hcg-searchable-select - Live Demo

Interactive demos of hcg-searchable-select, a lightweight zero-dependency searchable dropdown for native <select> elements. Try filtering, optgroups, clearable selection, disabled state, form validation, dynamic options, and the JavaScript API. Full documentation

1. Basic searchable select (auto-init)

Add data-hcg-select and type in the search box to filter options.

Try it Country

View usage code

<select data-hcg-select data-placeholder="Select a country">
  <option value="">- Select a country -</option>
  <option value="us">United States</option>
</select>

2. Grouped options (optgroup)

Native <optgroup> elements render as non-selectable headers.

Try it Food

View usage code

<select data-hcg-select>
  <option value="">- Pick food -</option>
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
  </optgroup>
</select>

3. Clearable selection

Add data-clearable to show a clear button when a value is chosen.

Try it City

View usage code

<select data-hcg-select data-clearable data-placeholder="Choose a city">
  <option value="">- Choose a city -</option>
  <option value="par">Paris</option>
</select>

4. Pre-selected value

A select with a default selected option shows that label on load.

Try it Plan

View usage code

<select data-hcg-select>
  <option value="free">Free</option>
  <option value="pro" selected>Pro</option>
</select>

5. Disabled select and disabled options

Disabled selects cannot open; individual options can be marked disabled.

Try it Locked field With disabled option

View usage code

<select data-hcg-select disabled>...</select>

<select data-hcg-select>
  <option value="legacy" disabled>Legacy (unavailable)</option>
</select>

6. Manual initialization with options

Call hcgSelect() with custom placeholders and an onChange callback.

Try it Language

Selected: —

View usage code

hcgSelect("#demo-manual", {
  placeholder: "Choose a language",
  searchPlaceholder: "Type to filter…",
  onChange: function (value) {
    console.log("Selected:", value);
  }
});

7. Long list with search highlighting

Filter a large list; matching text is highlighted in the dropdown.

Try it Time zone

View usage code

<!-- Same markup as a normal select; filtering is built in -->
<select data-hcg-select data-placeholder="Search time zones">
  <option value="ist">Asia/Kolkata (IST)</option>
</select>

8. Programmatic API

Control the widget with open(), close(), clear(), and setDisabled().

Controls Region

View usage code

const api = hcgSelect("#demo-api", { clearable: true });

api.open();
api.close();
api.clear();
api.setDisabled(true);

9. Dynamic options

Add or remove options at runtime; the list rebuilds automatically. Call refresh() after bulk changes if needed.

Try it Category

View usage code

const opt = document.createElement("option");
opt.value = "games";
opt.textContent = "Games";
select.appendChild(opt);
// list rebuilds via MutationObserver; or call api.refresh()

10. Form validation (required)

The native required attribute and browser validation still work; the widget mirrors aria-required and aria-invalid.

Try it

View usage code

<form>
  <select name="country" data-hcg-select required>
    <option value="">- Select a country -</option>
    <option value="us">United States</option>
  </select>
  <button type="submit">Submit</button>
</form>