https://www.tryme.co/assets/controllers/tom_selects/time_zone_controller-252f0b3c.js

1import { Controller } from '@hotwired/stimulus'
2import TomSelect from 'tom-select'
3
4export default class extends Controller {
5  static targets = ['input']
6  static classes = ['hidden', 'error']
7
8  connect() {
9    let controller = this;
10
11    new TomSelect(this.inputTarget, {
12      searchField: 'text',
13      maxOptions: 1000,
14      itemClass: '',
15      sortField: 'text',
16      render: {
17        option: (data, escape) => {
18          let split_text = data.text.split(/[ ,]+/);
19          return '<div>' +
20                    '<div>'+
21                      '<p class="ts-title">' +
22                        escape(split_text[0]) +
23                        '&nbsp;<span class="text-[#667085]"> ' + escape(split_text[1]) + '</span>' +
24                      '</p>' +
25                    '</div>' +
26                  '</div>'
27        },
28        item: (data, escape) => {
29          let split_text = data.text.split(/[ ,]+/);
30          return '<div title="' + escape(data.text) + '">' +
31            '<p class="ts-title">' +
32              escape(split_text[0]) +
33              '&nbsp;<span class="text-[#667085]"> ' + escape(split_text[1]) + '</span>' +
34            '</p>' +
35          '</div>'
36        }
37      },
38      onItemAdd: function() {
39        return this.input.classList.remove(controller.errorClass)
40      }
41    })
42  }
43
44  handleValidation(event) {
45    event.preventDefault()
46    this.inputTarget.classList.add(this.errorClass)
47  }
48}