Better Select makes html <select> elements better, by adding features like type to search, multi-select, and customizable styling and templates.

The current version of Better Select is an extreme proof of concept. There are still quite a few features to be added.

​
Setup

Load Better Select in the <head> of your document.

<script src="https://cdn.jsdelivr.net/gh/reallygoodsoftware/[email protected]/betterselect.min.js"></script>

​
Basic Usage

To use, simply wrap a normal <select> element in a <better-select> tag.

<better-select>
  <select>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="cherry">Cherry</option>
    <option value="orange">Orange</option>
    <option value="pear">Pear</option>
    <option value="kiwi">Kiwi</option>
  </select>
</better-select>

This will render a simple dropdown with a search input, like so.

​
Demo


​
Multiple Selections

To enable multiple selections, add the multiple attribute to the <select> element.

<better-select>
  <select multiple>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="cherry">Cherry</option>
    <option value="orange">Orange</option>
    <option value="pear">Pear</option>
    <option value="kiwi">Kiwi</option>
  </select>
</better-select>

​
Demo

​
Templates

You can specify custom templates for the pills and dropdown items.

  • Specify your data as a json hash in the data-item attribute of the <option> element.

  • Use item.key to access the data in the templates. You can use data-text, data-src, or data-href to set properties.

  • Use <template data-for="item"> to specify the template for the dropdown items and <template data-for="pill"> to specify the template for the selected pills.

<better-select>
  <select multiple>
    <option value="1" data-item='{"icon": "🍎", "name": "Apple", "description": "Fresh red apple", "color": "#ffebee"}'>Apple</option>
    <option value="2" data-item='{"icon": "🍌", "name": "Banana", "description": "Ripe yellow banana", "color": "#fff3e0"}'>Banana</option>
  </select>
  <template data-for="item">
    <div data-checkbox>
    </div>
    <div class="flex flex-col">
      <div class="font-bold">
        <span data-text="item.icon"></span>
        <span data-text="item.name"></span>
      </div>
      <div data-field="item.description"></div>
    </div>
  </template>
  <template data-for="pill">
    <div data-text="item.icon"></div>
    <span data-text="item.name"></span>
  </template>
</better-select>

​
Demo

​
Remote Results

You can load results from a remote url by specifying a data-url attribute on the <select> element.

  • Be sure to include {query}, which will be replaced with the current search query.

  • Your response should include an array of objects, each with a value and name property.

<better-select>
  <select multiple name="fruit" data-url="http://demo.h1rails.localhost/search?query={query}">
  </select>
</better-select>

​
Demo