Svelte QuickSearch Bar with FuzzySearch

Open with CTRL+K

Installation

npm install --save-dev svelte-quicksearch-bar

Example basic usage

See on REPL

<script>
import QuickSearchBar from "svelte-quicksearch-bar@latest";
const onPick = e => selectedOption = e.detail;
let options = [{label: "Example", link: "/"}];
let selectedOption;
</script>

<QuickSearchBar {options} on:pick={onPick} keys={['label', 'link']} />

<p>Press CTRL + K to open</p>
<p>Selected: {JSON.stringify(selectedOption)}</p>

Example advanced usage with slots to replace input or item visualization

See on REPL

<script>
import QuickSearchBar from "svelte-quicksearch-bar@latest";
const onPick = ({detail}) => selectedOption = detail;
let options = [{label: "Example", link: "/"}];
let inputEl;
let selectedOption;
let value;
</script>

<style>
    .secondary-text {
        font-size: 0.7em;
        color: purple;
    }
    input {
        width: 100%;
    }
</style>

<QuickSearchBar {options} {inputEl} bind:value on:pick={onPick} keys={['label', 'link']}>
  <span slot="input">
    <input type="text" bind:value bind:this={inputEl} />
  </span>
  <span slot="item" let:option>
    {@html option.html.label}
    <span class="secondary-text">
      {@html option.html.link}
    </span>
  </span>
</QuickSearchBar>

<p>Press CTRL + K to open</p>
<p>Selected: {JSON.stringify(selectedOption)}</p>

API

Events

Development of this component

Go to example folder and run

npm install
npm run dev