Last active
October 1, 2025 15:02
-
-
Save alekrutkowski/06fb805fc78ac882a15142dac60404e7 to your computer and use it in GitHub Desktop.
Using selectize-like input in Observablehq's "Observable Framework" markdown
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- 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> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
To imitate what is available in Shiny (https://shiny.posit.co/r/articles/build/selectize).