https://github.com/elcobvg/svelte-autocomplete

A lightweight typeahead / autocomplete component made with Svelte.js
https://github.com/elcobvg/svelte-autocomplete

auto-complete autocomplete autosuggest javascript svelte svelte-components sveltejs typeahead

Last synced: 4 months ago
JSON representation

A lightweight typeahead / autocomplete component made with Svelte.js

• Host: GitHub
• URL: https://github.com/elcobvg/svelte-autocomplete
• Owner: elcobvg
• License: mit
• Created: 2018-07-13T04:59:46.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-01-16T08:08:45.000Z (about 6 years ago)
• Last Synced: 2024-10-08T08:52:02.118Z (4 months ago)
• Topics: auto-complete, autocomplete, autosuggest, javascript, svelte, svelte-components, sveltejs, typeahead
• Language: HTML
• Homepage: http://svelte-autocomplete.surge.sh/
• Size: 9.77 KB
• Stars: 114
• Watchers: 6
• Forks: 18
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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

  
Loading data from API...


````

### 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

````

**create component like so:**

````javascript

const myComponent = new AutoComplete({

  target: document.querySelector('#app'),

  data: { 

    name: 'fruits',

    itemStart: 1,

    items: [...]

  }

})

````