It's a dynamic select

Getting started

CDN

To use a CDN all you need is to add the following code in the HTML page:

<script type="module" src="https://cdn.jsdelivr.net/gh/OmarCastro/its-a-dynamic-select@0.1.0/dist/dynamic-select.element.min.js?named=dynamic-select"></script>

NPM

If you wish to import from npm and use a bundler, you can install the its-a-dynamic-select package

npm install its-a-dynamic-select

Not all bundlers support query strings, it is recommended to import and register the component, like the following code:

import element from 'its-a-dynamic-select'

customElements.define('dynamic-select', element)

Examples

Basic example

<dynamic-select></dynamic-select>

Option list

<dynamic-select>
    <option>Lorem</option>
    <option>Ipsum</option>
</dynamic-select>

Custom width

<dynamic-select style="width: 300px;">
    <option>Lorem</option>
    <option>Ipsum</option>
</dynamic-select>

Selected Value

<dynamic-select>
    <option>Lorem</option>
    <option selected>Ipsum</option>
</dynamic-select>

Option group

<dynamic-select>
    <option value="">Choose a food</option>
    <optgroup label="Fruit">
        <option value="apple">Apples</option>
        <option value="banana">Bananas</option>
        <option value="blueberry">Blueberries</option>
        <option value="coconut">Coconuts</option>
        <option value="cherry">Cherries</option>
        <option value="damson">Damsons</option>
        <option value="mango">Mangoes</option>
        <option value="orange">Oranges</option>
        <option value="pear">Pears</option>
        <option value="pineapple">Pineapples</option>
        <option value="strawberry">Strawberries</option>
    </optgroup>
    <optgroup label="Vegetables">
        <option value="artichoke">Artichokes</option>
        <option value="broccoli">Broccoli</option>
        <option value="cabbage">Cabbages</option>
        <option value="carrots">Carrots</option>
    </optgroup>
    <optgroup label="Meat">
        <option value="beef">Beef</option>
        <option value="chicken">Chicken</option>
        <option value="pork">Pork</option>
    </optgroup>
    <optgroup label="Fish">
        <option value="catfish">Catfish</option>
        <option value="cod">Cod</option>
        <option value="haddock">Haddock</option>
        <option value="salmon">Salmon</option>
        <option value="turbot">Turbot</option>
        <option value="tuna">Tuna</option>
    </optgroup>
</dynamic-select>

Multiple selection

<dynamic-select multiple>
    <option>Lorem</option>
    <option selected>Ipsum</option>
    <option>Dolor</option>
    <option selected>Sit</option>
    <option>Amet</option>
</dynamic-select>

Multiple selection with custom width

<dynamic-select multiple style="width: 40ch">
    <option>Lorem</option>
    <option selected>Ipsum</option>
    <option>Dolor</option>
    <option selected>Sit</option>
    <option>Amet</option>
</dynamic-select>

Multiple selection with limited width

<dynamic-select multiple style="max-width: 40ch">
    <option>Lorem</option>
    <option selected>Ipsum</option>
    <option>Dolor</option>
    <option selected>Sit</option>
    <option>Amet</option>
</dynamic-select>

dynamic data

Event fetch

<dynamic-select data-src="example-src-1">
</dynamic-select>

document.body.addEventListener('datafetch', (event) => {
  if (event.target?.matches('[data-src="example-src-1"]')) {
    event.detail.respondWith([{
      value: '1',
      text: 'option 1'
    }, {
      value: '2',
      text: 'option 2'
    }])
  }
})

CSV response

<dynamic-select data-src="example-src-2">
</dynamic-select>

value,text
1,option 1
2,option 2
3,option 3

Json array response

<dynamic-select data-src="example-src-2">
</dynamic-select>

[
  {"value": "1", "text": "json option 1"},
  {"value": "2", "text": "json option 2"},
  {"value": "3", "text": "json option 3"},
  {"value": "4", "text": "json option 4"}
]

CSV response with groups

<dynamic-select data-src="example-src-countries-by-continent"></dynamic-select>

loading animation while waiting for response

<dynamic-select data-src="example-src-1-second-delay"></dynamic-select>

templating

Option

<dynamic-select data-src="example-src-countries">
  <template data-for="option">
    <span>
      <span style="display: inline-block;width: 20ch;" style="width: 20ch;"><slot name="$.data.Continent"/></span>
      <span><slot name="$.text"/></span>
    </span>
  </template>

</dynamic-select>

Loading notification

<dynamic-select data-src="example-src-1-second-delay">
  <template data-for="loading-notification">
    <style>
      .center {
        display: flex;
        justify-content: center;
      }
      .loader {
          width: 48px;
          height: 48px;
          border: 5px solid currentColor;
          opacity: 50%;
          border-bottom-color: transparent;
          border-radius: 50%;
          display: inline-block;
          box-sizing: border-box;
          animation: rotation 1s linear infinite;
      }
      @keyframes rotation {
        0% {transform: rotate(0deg);}
        100% {transform: rotate(360deg);}
      }                 
    </style>
    <div class="center"><div class="loader"></div></div>
  </template>
</dynamic-select>