svelte-autocomplete

KO | EN

gitlite — search

#python #cli #hacktoberfest #java #vue #golang #nodejs #linux #docker-compose #react #machine-learning #android

svelte-autocomplete

★ 119 Open GitHub ↗

A lightweight typeahead / autocomplete component made with Svelte.js

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# svelte-autocomplete
Lightweight typeahead / autocomplete component made with [Svelte.js](https://svelte.technology/)

* no dependencies
* can handle asynchronous data
* use plain lists or key / value pairs

#### Try the demo at http://svelte-autocomplete.surge.sh/

## Install

`npm install svelte-autocomplete`

## Usage

Import the component directly in your Svelte project.

````javascript
import AutoComplete from 'svelte-autocomplete'

export default {
  components: {
    AutoComplete,
	...
  }
}
````
And then use it like so:

````html
<AutoComplete class="input" name="fruits" items="{fruits}" minChar="1" />

<AutoComplete name="countries" items="{countries}" isAsync on:input="loadApiData(event)">
  <div class="notification">Loading data from API...</div>
</AutoComplete>

````

### Options

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| name | String | - | Form input name
| class | String | - | Additional styles for input element
| items | Array | - | Array with items, can be a plain list or key, value pairs
| isAsync | Boolean | false | If retrieving API data asynchronously
| minChar | Number | 2 | Min. characters to type before popup shows
| maxItems | Number | 10 | Max. items to show in popup
| fromStart | Boolean | true | Match from the start or anywhere in the string

### Slots

| Slot | Prop dependencies | Description |
|------|-------------------|-------------|
| default | isAsync | custom loading indication |

## Made with Svelte
It's made with [Svelte](https://svelte.technology/), which means you don't need any JS framework. Just use the `dist/index.js` file in any Javascript project:

**include the bundle:**

````html
<script src="svelte-autocomplete/dist/index.js"></script>
````
**create component like so:**

````javascript
const myComponent = new AutoComplete({
  target: document.querySelector('#app'),
  data: { 
    name: 'fruits',
    itemStart: 1,
    items: [...]
  }
})
````

svelte-autocomplete

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README