# svelte-quicksearch-bar

> QuickSearchBar for svelte apps

Latest version **1.0.5** (published 2022-02-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install svelte-quicksearch-bar
pnpm add svelte-quicksearch-bar
yarn add svelte-quicksearch-bar
bun add svelte-quicksearch-bar
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2022-02-21 |
| First published | 2020-02-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 200.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20 |
| Author | Sarodus |
| Maintainers | sarodus |
| Keywords | svelte |

## Links

- npm: https://www.npmjs.com/package/svelte-quicksearch-bar
- Repository: https://github.com/Sarodus/svelte-quicksearch-bar
- Homepage: https://github.com/Sarodus/svelte-quicksearch-bar#readme
- Issues: https://github.com/Sarodus/svelte-quicksearch-bar/issues
- npm.io page: https://npm.io/package/svelte-quicksearch-bar

## Dependencies (1)

- [fuzzysort](https://npm.io/package/fuzzysort.md) ^1.2.1

## Recent versions

- 1.0.5 (latest) — 2022-02-21
- 1.0.4 — 2020-02-11
- 1.0.3 — 2020-02-11
- 1.0.2 — 2020-02-09
- 1.0.1 — 2020-02-08
- 1.0.0 — 2020-02-08

## README

# Svelte QuickSearch Bar with FuzzySearch

**Open with CTRL+K**

## Installation

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

## Example basic usage

[See on REPL](https://svelte.dev/repl/d219a64c734d49fc8c4d7dcdcd734e64?version=3.18.1)

```
<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](https://svelte.dev/repl/9361c615fee1408e876540158bd91aec?version=3.18.1)

```
<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
```

---
_Source: https://npm.io/package/svelte-quicksearch-bar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._