JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tom-select.complete.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="p-4">	<select id="select-tags" name="select-tags" class="select-ts" multiple data-placeholder="Best movies and TV shows" class="ts-control form-control">
		<optgroup label="TV Shows">
			<option value="Blue Bloods" data-date="2010-2021">Blue Bloods (2010-2021)</option>
			<option value="Magnum P.I." data-date="1980-1988" selected>Magnum P.I. (1980-1988)</option>
		</optgroup>
		<optgroup label="Movies">
			<option value="An Innocent Man" data-date="1989">An Innocent Man (1989)</option>
			<option value="In & Out" data-date="1997">In & Out (1997)</option>
			<option value="Lassiter" data-date="1984">Lassiter (1984)</option>
			<option value="Mr. Baseball" data-date="1992">Mr. Baseball (1992)</option>
			<option value="Quigley Down Under" data-date="1990">Quigley Down Under (1990)</option>
			<option value="Three Men and a Baby" data-date="1987">Three Men and a Baby (1987)</option>
		</optgroup>
	</select>
	</div>

JavaScript

//eventHandlers:
const eventNames = ['initialize', 'load', 'change', 'focus', 'blur'];

// default options
const TSoptions = {
  plugins: ['remove_button'],
  create: true,
  onItemAdd: function() {
    this.setTextboxValue('');
    this.refreshOptions();
  },
  render: {
    option: function(data, escape) {
      return '<div class="d-flex"><span>' + escape(data.value) + '</span><span class="ms-auto text-muted">' + escape(data.date) + '</span></div>';
    },
    item: function(data, escape) {
      return '<div>' + escape(data.value) + '</div>';
    }
  }
};


// for element with ID, querySelectorAll is wrong method, use querySelector() or getElementById() for single elements;

//use classs for multiple TS elements on the page or form:
// always use name="" attributes on form elements, formData requires name attributes for processing

const TS_selects = document.querySelectorAll('.select-ts');

TS_selects.forEach((sel) => {

  // initalize each TS:
  let TS_handler = new TomSelect(sel, TSoptions);
  eventNames.forEach(name => {
    TS_handler.on(name, function(event) {
      console.log('hey I am done', name, event);
    });

  });

});