Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mordechaihadad/svelte-complete
A super simple autocomplete library for svelte that supports RTL
https://github.com/mordechaihadad/svelte-complete
Last synced: 3 months ago
JSON representation
A super simple autocomplete library for svelte that supports RTL
- Host: GitHub
- URL: https://github.com/mordechaihadad/svelte-complete
- Owner: MordechaiHadad
- License: mit
- Created: 2023-08-16T12:18:17.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-12-13T09:59:26.000Z (about 1 year ago)
- Last Synced: 2023-12-13T16:45:22.366Z (about 1 year ago)
- Language: Svelte
- Homepage: https://mordechaihadad.github.io/svelte-complete/
- Size: 140 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Svelte Complete
A simple autocomplete component for Svelte that fully supports RTL.
## 🔧 Installation
Work in progress.
## ❓ Usage
### Minimalist Example
```html
import Autocomplete from "svelte-complete";
let items = ["apple", "banana", "orange"];
let value;
```
### Component Properties
| **Property Name** | Type | Description | Default Value |
|-------------------------|------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------|
| **displayField** | string | When providing an object array `displayField` will be used to determine which field in the object will be displayed in the suggestions list | `Empty string` |
| **highlightCharacters** | "matched", or "unmatched" | Will highlight the matching/non matching characters based on the input | `"matched"` |
| **item** | string[], or object[] | The list of items to be used by the autocomplete | `Empty array` |
| **noResultsMessage** | string | The message to be displayed when no item matches the given input | `"No results found"` |
| **setItemsOnFocus** | () => Promise | A lambda that allows for setting the item array when the autocomplete component is focused instead of when it is instantiated | `Returns an empty array` |
| **sort** | "ascend", "descend", or ((a: any, b: any) => number) | The sorting algorithm for the given items array, descend and ascend sorts only apply to a string array, for an objects array provide your own implementation | `"ascend"` |
| **textDirection** | "auto", "ltr", or "rtl" | Use this property if you want to use the autocomplete in RTL mode, not required if parent's dir is set to "rtl" | `"auto"` |
| **value** | string | The currently selected value | `Empty string` |
---
### Component CSS Variables
| CSS Variable Name | Description | Default Value |
|---------------------------------------------------|------------------------------------------------------------|----------------------------------|
| --autocomplete-active-suggestion-background-color | Sets background color for an active/hovered suggestion | `rgb(115 115 115 / 0.2)` |
| --autocomplete-container-height | Sets the height for the autocomplete component | `fit-content` |
| --autocomplete-container-width | Sets the width for the autocomplete component | `fit-content` |
| --autocomplete-input-background-color | Sets the background color for the autocomplete input | `rgb(250 250 250)` |
| --autocomplete-input-border-color | Sets the border color for the autocomplete input | `rgb(115 115 115)` |
| --autocomplete-input-border-width | Sets the border width for the autocomplete input | `1px` |
| --autocomplete-input-icon-color | Sets the color for the icon in the input box | `var(--autocomplete-text-color)` |
| --autocomplete-input-width | Sets the width for the input box | `100%` |
| --autocomplete-input-x-padding | Sets the x axis padding for the input box | `0.5rem` |
| --autocomplete-input-y-padding | Sets the y axis padding for the input box | `0.5rem` |
| --autocomplete-no-results-text--color | Sets the text color for the no results message | `rgb(64 64 64)` |
| --autocomplete-suggestion-text-color | Sets the text color for a suggestion | `var(--autocomplete-text-color)` |
| --autocomplete-suggestions-list-background-color | Sets the background color for the suggestions list | `rgb(250 250 250)` |
| --autocomplete-suggestions-list-z-index | Sets the z-index for the suggestions list | `10` |
| --autocomplete-text-color | Sets the general text color for the autocomplete container | `rgb(23 23 23)` |