JSFiddle - React, Tailwind, and code Playground

by winstonchang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/microplugin/0.0.3/microplugin.min.js"></script>
<script src="https://raw.githubusercontent.com/SLMNBJ/selectize-plugin-a11y/master/selectize-plugin-a11y.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.0/js/selectize.js"></script>
<select name="cars" id="select">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

JavaScript

$(function() {
  $('select').selectize({
    plugins: ['selectize-plugin-a11y'],
    render: {
      option: function($item, escape) {
        // Every option must have a unique id
        return `<div class="option" role="option" id="${$item.text.replace(' ', '')}">${$item.text}</div>`
      }
    }
  });
 })