Select Filter

When a <select> has a large number of options it can be tedious to scroll and hunt for the right one. The Select Filter component pairs a search input with a select so that typing in the search box narrows the visible options in real time. The option values — and the select’s name — are left untouched, so the form submits exactly as it would without the filter.

The search input and its target select are paired by a shared group name, just like the Checkbox Selector component. This means you can place any number of independent Select Filters on the same page.

Example

Place the data-select-filter attribute on the search input and give it a group name as its value — in this case fruit. Then place the data-select-filter-target attribute on the <select> you’d like it to filter, using the same group name. Rendering the select with a size attribute turns it into a scrollable list box, which pairs nicely with the search box, but a standard dropdown works too.

<input type="search" class="form-control mb-2" placeholder="Search fruit…" autocomplete="off"
  data-select-filter="fruit">
<select name="fruit_id" class="form-select" size="6" data-select-filter-target="fruit">
  <option value="1">Apple</option>
  <option value="2">Apricot</option>
  <option value="3">Banana</option>
  <option value="4">Blackberry</option>
  <option value="5">Blueberry</option>
  <option value="6">Cherry</option>
  <option value="7">Grape</option>
  <option value="8">Mango</option>
  <option value="9">Orange</option>
  <option value="10">Peach</option>
  <option value="11">Pear</option>
  <option value="12">Pineapple</option>
  <option value="13">Raspberry</option>
  <option value="14">Strawberry</option>
  <option value="15">Watermelon</option>
</select>

Multiple Filters

Because each filter is bound to its target by a group name, multiple filters can live on the same page without interfering with one another. The example below uses the vegetable group, independent of the fruit group above.

<input type="search" class="form-control mb-2" placeholder="Search vegetables…" autocomplete="off"
  data-select-filter="vegetable">
<select name="vegetable_id" class="form-select" size="6" data-select-filter-target="vegetable">
  <option value="1">Artichoke</option>
  <option value="2">Asparagus</option>
  <option value="3">Broccoli</option>
  <option value="4">Carrot</option>
  <option value="5">Cauliflower</option>
  <option value="6">Celery</option>
  <option value="7">Cucumber</option>
  <option value="8">Eggplant</option>
  <option value="9">Kale</option>
  <option value="10">Onion</option>
  <option value="11">Pepper</option>
  <option value="12">Potato</option>
  <option value="13">Spinach</option>
  <option value="14">Tomato</option>
  <option value="15">Zucchini</option>
</select>

Notes

• Matching is case-insensitive and tests the option’s visible text, not its value.
• The full option list is captured before the first keystroke, so clearing or shortening the search restores the hidden options.
• The component listens for input using a delegated event handler, so filters added to the page later (for example, content loaded over AJAX) work automatically with no extra initialization.
• Group names must be unique on a page; two inputs sharing a group name would both target the same select.