JSFiddle - React, Tailwind, and code Playground

by ArekKDev

HTML

<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.6/css/selectize.min.css" integrity="sha512-zSutnLmqtlWVx0A5NdW8YwshpUETPzJ6YBAvb+bkE0QbVKopS0ACPjE6QY6F9aFPSowfiho+hgeQh095FRPj5A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.6/js/standalone/selectize.min.js"></script>
</head>
<body>
  <div>
    <label for="phone-prefix" class="form-label">Prefix</label>
    <select class="selectize-basic" name="phonePrefix" id="phone-prefix"></select>
  </div>
<script>
    

</script>
</body>
</html>

JavaScript

/**
     * Seletize.js for the phone prefix form field https://github.com/selectize/selectize.js/blob/master/docs/usage.md
     */

    const selectizeInit = (() => {

        "use strict";

        const s = {
            selectBasic: "selectize-basic"
        };

        // console.log('s', s)

        const initialize = () => {
            const selectFields = document.querySelectorAll('.selectize-basic');

            selectFields && selectFields.forEach( select => {

                $(select).selectize({

                    // hideSelected: true,
                    create: false,
                    maxItems: 1,
                    valueField: 'country',
                    labelField: 'pref',
                    searchField: ['country', 'pref', 'code'],
                    sortField: [{
                        field: 'priority',
                        direction: 'asc'
                    },{
                        field: 'country',
                        direction: 'asc'
                    }],
                    highlight: true,
                    placeholder: 'Search',
                    openOnFocus: true,
                    options: countryCodes,
                    items: ['Bhutan'],
                    render: {
                        item: function(item, escape) {
                            return `
                                <div class="select-item">
                                <span>${escape(item.pref)}</span>
                                </div>
                            `;
                        },
                        option: function(item, escape) {
                            return `
                                <div class="select-item">
                                    <span class="select-item__country">${escape(item.pref)}</span>
                                    <span class="select-item__prefix">${escape(item.country)}</span>
                                </div>
                            `;
          ...