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.
Setup
Load Better Select in the <head>
of your document.
<script src="https://cdn.jsdelivr.net/gh/reallygoodsoftware/better-select@0.2.0/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 usedata-text
,data-src
, ordata-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
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
andname
property.
<better-select>
<select multiple name="fruit" data-url="http://demo.h1rails.localhost/search?query={query}">
</select>
</better-select>