About Better Select

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.

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

Apple Banana Cherry Orange Pear Kiwi Mango Apple 2 Banana 2 Cherry 2 Orange 2 Pear 2 Kiwi 2 Mango 2 Apple 3 Banana 3 Cherry 3 Orange 3 Pear 3 Kiwi 3 Mango 3 Apple 4 Banana 4 Cherry 4 Orange 4 Pear 4 Kiwi 4 Mango 4 Apple 5 Banana 5 Cherry 5 Orange 5 Pear 5 Kiwi 5 Mango 5 Apple 6 Banana 6 Cherry 6 Orange 6 Pear 6 Kiwi 6 Mango 6

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

Apple Banana Cherry Orange Pear Kiwi

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 for dropdown items -->
  <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 for selected pills -->
  <template data-for="pill">
    <div data-text="item.icon"></div>
    <span data-text="item.name"></span>
  </template>
</better-select>

Demo

Apple Banana Cherry Grape Orange Pear Blueberry Kiwi

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

<script v-pre> </script> <style> </style>