JSFiddle - React, Tailwind, and code Playground

by alfredopacino

HTML

<script type="text/avascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"> </script>
<script type="text/avascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.qtip.min.js"> </script>


<div id="select-container">

</div>
<script>
		$("#select-container").html(`
    <select 
        multiple
        data-live-search="true"
        data-width="100%">
  ${categories?.map(opt => html`
                        ${opt.separator 
                            ? html`<option data-divider="true"></option>` 
                            : html`
                                ${opt.fields 
                                    ? html`
                                        <optgroup label="${opt.id ?? opt.name}">${opt.fields.map(subopt => html`
                                            ${UtilsNew.isObject(subopt) 
                                                ? html`
                                                    <option ?disabled="${subopt.disabled}" ?selected="${subopt.selected}" .value="${subopt.id ?? subopt.name}">${subopt.name}</option>` 
                                                : html`
                                                    <option>${subopt}</option>
                                                `}
                                            `)}
                                        </optgroup>` 
                                    : html` 
                                        ${UtilsNew.isObject(opt) 
                                            ? html`
                                                <option ?disabled="${opt.disabled}" ?selected="${opt.selected}" .value="${opt.id ?? opt.name}">${opt.name ?? opt.id}</option>` 
                                            : html`
                                                <option>${opt}</option>
                                        `}
                                `}
                        `}
                    `)}
                </select>
 ...

JavaScript

const categories = [
        {
            title: "Intergenic",
            terms: [
                {
                    id: "SO:0001631",
                    name: "upstream_gene_variant",
                    description: "A sequence variant located 5' of a gene",
                    impact: "modifier"
                },
                {
                    id: "SO:0001636",
                    name: "2KB_upstream_variant",
                    description: "A sequence variant located within 2KB 5' of a gene",
                    impact: "modifier"
                },
                {
                    id: "SO:0001632",
                    name: "downstream_gene_variant",
                    description: "A sequence variant located 3' of a gene",
                    impact: "modifier"
                },
                {
                    id: "SO:0002083",
                    name: "2KB_downstream_variant",
                    description: "A sequence variant located within 2KB 3' of a gene",
                    impact: "modifier"
                },
                {
                    id: "SO:0001628",
                    name: "intergenic_variant",
                    description: "A sequence variant located in the intergenic region, between genes",
                    impact: "modifier"
                }
            ]
        },
        {
            title: "Regulatory",
            terms: [
                {
                    id: "SO:0001620",
                    name: "mature_miRNA_variant",
                    description: "A transcript variant located with the sequence of the mature miRNA",
                    impact: "modifier"
                },
                // {
                //     id: "SO:0001894",
                //     name: "regulatory_region_ablation",
                //     description: "A feature ablation whereby the deleted region includes a regulatory region",
                //     impact: "moderate",
                // },
    ...