Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save alekrutkowski/06fb805fc78ac882a15142dac60404e7 to your computer and use it in GitHub Desktop.
Save alekrutkowski/06fb805fc78ac882a15142dac60404e7 to your computer and use it in GitHub Desktop.
Using selectize-like input in Observablehq's "Observable Framework" markdown
<!-- https://tom-select.js.org/#:~:text=Additional%20CLI%20usage-,jsDelivr,-The%20fastest%20way -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tom-select.complete.min.js"></script> <!-- Leave space below! -->
<!-- https://tom-select.js.org/examples/#:~:text=%3C-,select%20multiple,-%3E -->
```js
const mystates =
view(html`<select id="select-state" name="state[]" multiple placeholder="Select a state..." autocomplete="on">
<option value="">Select a state...</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA" selected>California</option> <!-- See "selected" -->
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY" selected>Wyoming</option> <!-- See "selected" -->
</select>`);
// Needs to be added in the same js code block:
new TomSelect("#select-state",{
maxItems: 4,
plugins:
['caret_position',
'input_autogrow',
'clear_button'
]
});
```
<p>${mystates.join(", ")}</p>
@alekrutkowski
Copy link
Author

To imitate what is available in Shiny (https://shiny.posit.co/r/articles/build/selectize).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment