TomSelect dropdown_input placeholder

by Plippie Plop

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.css">
<script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>
<div class="container m-1">
  <div class="row">

   
<select id="ex-dropdown-input" autocomplete="off" placeholder="Select stuff..">
	<option>amazing</option>
	<option selected>awesome</option>
	<option>cool</option>
	<option>excellent</option>
	<option>great</option>
	<option>neat</option>
	<option>superb</option>
	<option>wonderful</option>
</select>

  </div>
</div>

CSS

.plugin-clear_button.single .clear-button {
  /*fix fault in plugin css should be 0px for calculations */
  --ts-pr-caret: 0px;
}

/* bootstapping */


.select+.ts-wrapper .ts-control {

  display: flex;
  width: 100%;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

}

.ts-control input {
  color: var(--bs-secondary-color);
  font-size: 1rem;
  opacity: 1;
}

.ts-control .item {
  font-size: 1rem;
  font-weight: 400;
}

JavaScript

const TS = new TomSelect('#ex-dropdown-input',{

  plugins: ['dropdown_input'],
  onFocus: () =>{
   TS.control_input.setAttribute("placeholder","Search..."); 
  }  

});