Sarodus / svelte-quicksearch-bar

QuickSearch bar component made with svelte and fuzzy search

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

Prop	Type	Default	Description
hidden	Boolean	True	Hide or not this component
options	List[Objects]	[{ label: "Example", link: "/" }]	List of options to display
keys	List[String]	["label", "link"]	Keys to search in options with fuzzysearch
value	String	''	Value of the current search input
inputEl	InputElement	undefined	Used when provided an slot="input"

Events

Event Name	Callback	Description
pick	option	Fires when the option is selected/clicked

Development of this component

Go to example folder and run

npm install
npm run dev