- Notifications
You must be signed in to change notification settings - Fork18
A lightweight typeahead / autocomplete component made with Svelte.js
License
NotificationsYou must be signed in to change notification settings
elcobvg/svelte-autocomplete
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Lightweight typeahead / autocomplete component made withSvelte.js
- no dependencies
- can handle asynchronous data
- use plain lists or key / value pairs
Try the demo athttp://svelte-autocomplete.surge.sh/
npm install svelte-autocomplete
Import the component directly in your Svelte project.
importAutoCompletefrom'svelte-autocomplete'exportdefault{components:{ AutoComplete,...}}
And then use it like so:
<AutoCompleteclass="input"name="fruits"items="{fruits}"minChar="1"/><AutoCompletename="countries"items="{countries}"isAsyncon:input="loadApiData(event)"><divclass="notification">Loading data from API...</div></AutoComplete>
| 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 |
| Slot | Prop dependencies | Description |
|---|---|---|
| default | isAsync | custom loading indication |
It's made withSvelte, which means you don't need any JS framework. Just use thedist/index.js file in any Javascript project:
include the bundle:
<scriptsrc="svelte-autocomplete/dist/index.js"></script>
create component like so:
constmyComponent=newAutoComplete({target:document.querySelector('#app'),data:{name:'fruits',itemStart:1,items:[...]}})
About
A lightweight typeahead / autocomplete component made with Svelte.js
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.
Contributors3
Uh oh!
There was an error while loading.Please reload this page.