Svelte Complete

A simple autocomplete component for Svelte that fully supports RTL.

🔧 Installation

Work in progress.

❓ Usage

Minimalist Example

<script>
    import Autocomplete from "svelte-complete";

    let items = ["apple", "banana", "orange"];
    let value;
</script>

<Autocomplete {items} bind:value="{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<any[]> | 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) |