Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/metonym/svelte-search
Accessible, customizable Svelte search component
https://github.com/metonym/svelte-search
debounce form input search svelte svelte-component
Last synced: 11 days ago
JSON representation
Accessible, customizable Svelte search component
- Host: GitHub
- URL: https://github.com/metonym/svelte-search
- Owner: metonym
- License: mit
- Created: 2020-04-12T21:58:49.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-09-28T13:32:50.000Z (about 1 month ago)
- Last Synced: 2024-10-14T08:43:41.346Z (23 days ago)
- Topics: debounce, form, input, search, svelte, svelte-component
- Language: Svelte
- Homepage: https://metonym.github.io/svelte-search/
- Size: 445 KB
- Stars: 43
- Watchers: 3
- Forks: 3
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte-search
[![NPM][npm]][npm-url]
> Accessible, customizable Svelte search component.
This search component is composed using semantic `form` and `input` elements.
See [svelte-typeahead](https://github.com/metonym/svelte-typeahead) for a search component with dropdown results.
Try it in the [Svelte REPL](https://svelte.dev/repl/5e14a2cff1b9488fa4ffbff980c1f21d).
---
## Installation
**Yarn**
```bash
yarn add -D svelte-search
```
**NPM**
```bash
npm i -D svelte-search
```
**pnpm**
```bash
pnpm i -D svelte-search
```
## Styling
This component is unstyled by design. Target the component using the `[data-svelte-search]` selector.
```css
:global([data-svelte-search] input) {
width: 100%;
font-size: 1rem;
padding: 0.5rem;
margin: 0.5rem 0;
border: 1px solid #e0e0e0;
border-radius: 0.25rem;
}
```
## Usage
### Two-way binding
```svelte
import Search from "svelte-search";
let value = "";
{#if value}
(value = "")}>Clear "{value}"
{/if}
```
### on:submit
The `input` element is contained in a `form`. Use the forwarded `submit` event to obtain the value when pressing "Enter."
```svelte
console.log("submit", value)} />
```
### Label with placeholder text
`$$restProps` are forwarded to the input element.
```svelte
```
### Label slot
```svelte
Custom label
```
### Visually hidden label
Set `hideLabel` to `true` to visually hide the label.
```svelte
```
### Focus (declarative)
Use the `autofocus` prop to declaratively focus the input.
```svelte no-eval
```
### Focus (programmatic)
Bind the `ref` prop to programmatically focus the input.
```svelte
import Search from "svelte-search";
let ref = null;
ref.focus()}>Focus
```
### Debounced input
Use the `debounce` prop to specify the debounce value in milliseconds.
```svelte
import Search from "svelte-search";
let events = [];
(events = [...events, value])}
/>
{JSON.stringify(events, null, 2)}
```
## API
`$$restProps` are forwarded to the input element.
### Props
| Prop name | Type | Default value |
| :----------------------- | :----------------- | :-------------------------------------- |
| value | `string` | `""` |
| label | `string` | `"Search"` |
| hideLabel | `boolean` | `false` |
| debounce | `number` | `0` |
| ref | `HTMLInputElement` | `null` |
| id | `string` | `"search" + Math.random().toString(36)` |
| removeFormAriaAttributes | `boolean` | `false` |
| autofocus | `boolean` | `false` |
### Forwarded events
- on:input
- on:change
- on:submit
- on:focus
- on:blur
- on:keydown
### Dispatched events
- **on:type**: fired when the the input value is updated
- **on:clear**: fired when clicking the "X" button to clear the input value
```svelte
{
console.log("type", e.detail); // input value
}}
on:clear={() => {
console.log("clear");
}}
/>
```
## TypeScript
Svelte version 3.31 or greater is required to use this component with TypeScript.
TypeScript definitions are located in the [types folder](./types).
## Changelog
[Changelog](CHANGELOG.md)
## License
[MIT](LICENSE)
[npm]: https://img.shields.io/npm/v/svelte-search.svg?color=%23ff3e00&style=for-the-badge
[npm-url]: https://npmjs.com/package/svelte-search