Examples

Simple selection

  new SelectMadu({
    target: document.querySelector("#example1"),
    props: {
      search: false,
      datasource: [
        { text: "Option 1" },
        { text: "Option 2" },
        { text: "Option 3" }
      ]
    }
  });

  <!-- Svelte -->
  <SelectMadu search={false} datasource={datasource} />

Search, Custom keys

  new SelectMadu({
    target: document.querySelector("#example2"),
    props: {
      search: true, //Optional, true is the default value for search
      textKey: "pokemon",
      valueKey: "id",
      datasource: [
        { pokemon: "Pikachu", id: 1 },
        { pokemon: "Bulbasaur", id: 2 },
        { pokemon: "Charmander", id: 3 },
        { pokemon: "Squirtle", id: 4 },
        { pokemon: "Chikorita", id: 5 },
        { pokemon: "Treecko", id: 6 }
      ]
    }
  });

  <!-- Svelte -->
  <SelectMadu textKey="pokemon" valueKey="id" datasource={datasource} />

Multiple selection

  new SelectMadu({
    target: document.querySelector("#example3"),
    props: {
      multiple: true,
      datasource: [
        { text: "Attack On Titan" },
        { text: "Black Clover" },
        { text: "My Hero Academia" },
        { text: "Naruto" },
        { text: "One Piece" },
        { text: "Dragon Ball Z" },
        { text: "Bleach" },
        { text: "Fairy Tail" },
      ]
    }
  });

  <!-- Svelte -->
  <SelectMadu multiple={true} datasource={datasource} />

Nested options

  new SelectMadu({
    target: document.querySelector("#example4"),
    props: {
      datasource: [
        { text: "1 Leaf" }, 
        {
          text: "2 Parent",
          children: [
            { text: "2.1 Leaf" },
            {
              text: "2.2 Child",
              children: [
                { text: "2.1.1 Leaf" },
                { text: "2.1.2 Leaf" },
                { text: "2.1.3 Leaf" }
              ]
            },
            { text: "2.3 Leaf" } 
          ]
        },
        {
          text: "3 Parent",
          children: [
            { text: "3.1 Leaf" }
          ]
        }
      ]
    }
  });

  <!-- Svelte -->
  <SelectMadu datasource={datasource} />

Remote: async data

  // Returns a promise, ideal for fetch calls to load data from server
  // Gets called on component initialization and on each keydown during search
  const asyncFn = (searchValue) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        let result = [
          "Ooty, India",
          "Santiago, Chile",
          "Christchurch, New Zealand",
          "New York, USA"
        ];

        if (searchValue && searchValue.trim()) {
          result = result.filter(elem =>
            elem.toLowerCase().indexOf(searchValue.trim().toLowerCase()) > -1
          );
        }

        resolve(result.map(entry => ({ text: entry })));
      }, 2000);
    });
  };

  new SelectMadu({
    target: document.querySelector("#example5"),
    props: {
      datasource: asyncFn
    }
  });

  <!-- Svelte -->
  <SelectMadu datasource={asyncFn} />

Disabling component

  new SelectMadu({
    target: document.querySelector("#example6"),
    props: {
      disabled: true,
      datasource: [
        { text: "Option 1" },
        { text: "Option 2" },
        { text: "Option 3" }
      ]
    }
  });

  <!-- Svelte -->
  <SelectMadu disabled={true} datasource={datasource} />

Disabling individual options

  new SelectMadu({
    target: document.querySelector("#example7"),
    props: {
      datasource: [
        { text: "Option 1" },
        { text: "Option 2", disabled: true },
        { text: "Option 3" }
      ]
    }
  });

  <!-- Svelte -->
  <SelectMadu datasource={datasource} />

Animations

  new SelectMadu({
    target: document.querySelector("#example8"),
    props: {
      animate: true,
      datasource: [
        { text: "Option 1" },
        { text: "Option 2" },
        { text: "Option 3" }
      ]
    }
  });

  <!-- Svelte -->
  <SelectMadu animate={true} datasource={datasource} />

Custom components

Documentation work in progress.

  import IconListComponent from './IconListComponent';

  new SelectMadu({
    target: document.querySelector("#example9"),
    props: {
      datasource: [
        { text: "Option 1", optionComponent: IconListComponent },
        { text: "Option 2" },
        { text: "Option 3" }
      ]
    }
  });

  <!-- Svelte -->
  <SelectMadu datasource={datasource} />

Edit this page