In our app using jsbunlding-rails and stimulus we could use tom-select (which I didn’t know) using:
yarn add tom-select- add
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@2.2.1/dist/css/tom-select.css">in application.html.erb in the head - create a stimulus controller
// app/javascript/controllers/tom_select_controller.js
import { Controller } from "@hotwired/stimulus"
import TomSelect from "tom-select"
export default class extends Controller {
static get targets() {
return ["myInput"];
}
connect() {
new TomSelect(this.myInputTarget, {});
}
}
- register the stimulus controller
// app/javascript/controllers/index.js
import TomSelectController from "./tom_select_controller.js"
application.register("tom-select", TomSelectController)
- create an html page:
<div data-controller="tom-select">
<input data-tom-select-target="myInput" value="awesome,neat" autocomplete="off" placeholder="How cool is this?"/>
</div>
- render the page and try out the select form, it works
Stimulus is part of Hotwire, which I believe now comes by default with Rails 7 apps.