Svelte Autocomplete
A lightweight typeahead / autocomplete component made with Svelte.js
svelte-autocomplete
Lightweight typeahead / autocomplete component made with Svelte.js
- 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.
import AutoComplete from 'svelte-autocomplete'
export default {
components: {
AutoComplete,
...
}
}
And then use it like so:
<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, which means you don't need any JS framework. Just use the dist/index.js file in any Javascript project:
include the bundle:
<script src="svelte-autocomplete/dist/index.js"></script>
create component like so:
const myComponent = new AutoComplete({
target: document.querySelector('#app'),
data: {
name: 'fruits',
itemStart: 1,
items: [...]
}
})
