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: [...]
}
})