in-suggest

in-suggest is simple input autocomplete, typeahead module.

Install

Get file in ./dist

<link rel="stylesheet" href="in-suggest.min.css">
<script src="in-suggest.js"></script>

Using module

npm install in-suggest

import InSuggest from 'in-suggest'

Usage

<input id="my-input" type="text" placeholder="Enter a value">

const myInput = new InSuggest('my-input', options)

### options

• action(query, next) is fired when a key is pressed - required

  • query - the current input value
  • next - a callback function. you must give him an array

• selected(data, next) is fired when an item is selected - required

  • data - the object selected
  • next - a callback function that takes a string in paramter. This string parameter set the input value

• createItem(data) is called for each data passed by action() - required

Classes

If you want override the style. Here the template

<div class="in-suggest">
    <input class="in-suggest_input">
    <div class="in-suggest_menu">
        <div class="in-suggest_menu_item">
            // your element returned by createItem
        </div>
    </div>
</div>

Example

const myData = ['foo', 'bar']
const simpleAutocomplete = new InSuggest('id', {
    action(query, next) {
        // return myData filtered by the current input value
        next(myData.filter(
            value => value.toLowerCase().startsWith(query.toLowerCase()))
        )
    },

    selected(d, next) {
        next(d) // d is 'foo' or 'bar' and the input value take d
    },

    createItem(d) {
        const item = document.createElement('div')
        item.innerHTML = d
        return item
    }
})