svelte-autocomplete

    0.0.4 • Public • Published

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

    Install

    npm i svelte-autocomplete

    DownloadsWeekly Downloads

    28

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    40.7 kB

    Total Files

    6

    Last publish

    Collaborators

    • elcobvg