Svelecte

Various examples

This page gives you some examples what can be done and how.

Multiselect

Example how multiselect can be implemented.

3 selected 
<script>
  const svg_checked = `<svg>...</svg>`;
  const svg_empty = `<svg>...</svg>`;
  function svgRenderer(opt, isSelected, _input) {
    return `<div class="inlined">${opt.$selected ? svg_checked : svg_empty}<span>${opt.text}</span></div>`;
  }
</script>

<Svelecte
  multiple
  renderer={svgRenderer}
  collapseSelection="always"
  clearable
  keepSelectionInList={true}
  searchProps={{skipSort: true}}
></Svelecte>
<script>
  const svg_checked = `<svg>...</svg>`;
  const svg_empty = `<svg>...</svg>`;
  function svgRenderer(opt, isSelected, _input) {
    return `<div class="inlined">${opt.$selected ? svg_checked : svg_empty}<span>${opt.text}</span></div>`;
  }
</script>

<Svelecte
  multiple
  renderer={svgRenderer}
  collapseSelection="always"
  clearable
  keepSelectionInList={true}
  searchProps={{skipSort: true}}
></Svelecte>

Custom option snippet

Simple example of using snippet instead of render function for dropdown item rendering. Default snippet implementation correctly handles highlighted search. Custom snippet has no ability to do that.

If you need to keep highlighting feature use render function for custom option rendering.

option X
<script>
  import Svelecte from 'svelecte'

  let options = [
    {id: '1', text: 'option X'},
    {id: '2', text: 'option Y'},
    {id: '3', text: 'option Z'}
  ];
</script>

{#snippet option(item)}
<div>
  {item.$selected ? '👌' : '👉'} {item.text} {item.$selected ? '✅' : '☑️'}
</div>
{/snippet}

<Svelecte {options} closeAfterSelect={false} value={'1'} {option} />
<script>
  import Svelecte from 'svelecte'

  let options = [
    {id: '1', text: 'option X'},
    {id: '2', text: 'option Y'},
    {id: '3', text: 'option Z'}
  ];
</script>

{#snippet option(item)}
<div>
  {item.$selected ? '👌' : '👉'} {item.text} {item.$selected ? '✅' : '☑️'}
</div>
{/snippet}

<Svelecte {options} closeAfterSelect={false} value={'1'} {option} />

💡 Replicate "search highlighting" with custom option


<script>
  import Svelecte from 'svelecte'
  import { highlightSearch } from 'svelecte';

  let options = [
    {id: '1', text: 'option X'},
    {id: '2', text: 'option Y'},
    {id: '3', text: 'option Z'}
  ];
</script>

{#snippet optionWithSearch(item, inputValue)}
<div>
  <b>Item:</b> {@html highlightSearch(item, false, inputValue, opt => opt.text)} {item.$selected ? '💥' : ''}
</div>
{/snippet}

<Svelecte options={render_options} closeAfterSelect={false} value={'1'} />
<script>
  import Svelecte from 'svelecte'
  import { highlightSearch } from 'svelecte';

  let options = [
    {id: '1', text: 'option X'},
    {id: '2', text: 'option Y'},
    {id: '3', text: 'option Z'}
  ];
</script>

{#snippet optionWithSearch(item, inputValue)}
<div>
  <b>Item:</b> {@html highlightSearch(item, false, inputValue, opt => opt.text)} {item.$selected ? '💥' : ''}
</div>
{/snippet}

<Svelecte options={render_options} closeAfterSelect={false} value={'1'} />

Dependent selects

This functionality is not strictly related to remote fetch, but it’s typical how it’s used. Just set parentValue and you’re done. If you require parentValue in your fetch URL, just use [parent] placeholder.

<script>
  import Svelecte from 'svelecte';

  let parentValue = $state(null);
  let value = $state();

  // ...
</script>

<Svelecte {options} bind:value={parentValue} clearable />
<Svelecte {parentValue} bind:value fetch="/api/[parent]?search=[query]" />
<script>
  import Svelecte from 'svelecte';

  let parentValue = $state(null);
  let value = $state();

  // ...
</script>

<Svelecte {options} bind:value={parentValue} clearable />
<Svelecte {parentValue} bind:value fetch="/api/[parent]?search=[query]" />

Drag & Drop

You can add support for drag & drop reordering by adding svelte-dnd-action library

Reorder selection by dragging: red,blue,purple

Red
Blue
Purple
<script>
  import Svelecte from 'svelecte';
  import { dndzone, overrideItemIdKeyNameBeforeInitialisingDndZones, setDebugMode } from 'svelte-dnd-action';

  /** my example has no 'id' property */
  overrideItemIdKeyNameBeforeInitialisingDndZones('value');

  // rest of code ...
</script>

<Svelecte {options} bind:value={value} multiple {dndzone} placeholder="Re-order selected items by dragging" />
<script>
  import Svelecte from 'svelecte';
  import { dndzone, overrideItemIdKeyNameBeforeInitialisingDndZones, setDebugMode } from 'svelte-dnd-action';

  /** my example has no 'id' property */
  overrideItemIdKeyNameBeforeInitialisingDndZones('value');

  // rest of code ...
</script>

<Svelecte {options} bind:value={value} multiple {dndzone} placeholder="Re-order selected items by dragging" />
Made with Svelte ❤ by Martin Skocik.
♦
You can support me through GitHub.