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.
Load Better Select in the <head>
of your document.
To use, simply wrap a normal <select>
element in a <better-select>
tag.
This will render a simple dropdown with a search input, like so.
To enable multiple selections, add the multiple
attribute to the <select>
element.
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.
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 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.
Load Better Select in the <head>
of your document.
To use, simply wrap a normal <select>
element in a <better-select>
tag.
This will render a simple dropdown with a search input, like so.
To enable multiple selections, add the multiple
attribute to the <select>
element.
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.
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.