Hints - small javascript library to provide autocompletion help

Features

• Fully responsive. Hints always stays on screen.
• Keyboard friendly. Assistive technology support with aria included.
• Customizable. Adding, removing, filtering hints as you wish.

Demos

Simple hint list

Perfect to hint always the same items, independent of user input.

new Hints('#demo-simple', {
    hints:  ['ä', 'ö', 'ü', 'ß']
});

Different hints for different triggers

Useful when only some hints should be displayed depending on user input.

new Hints('#demo-triggers', {
    behavior: 'replace',
    hints: {
        'B': ['Baden-Württemberg', 'Bayern', 'Berlin', 'Brandenburg', 'Bremen'],
        'H': ['Hamburg', 'Hessen'],
        'M': ['Mecklenburg-Vorpommern'],
        'N': ['Niedersachsen', 'Nordrhein-Westfalen'],
        'R': ['Rheinland-Pfalz'],
        'S': ['Saarland', 'Sachsen', 'Sachsen-Anhalt', 'Schleswig-Holstein'],
        'T': ['Thüringen']
    }
});

Inline autocomplete

When you want to append hint value to the input.

new Hints('#demo-inline-autocomplete', {
    behavior: 'replace',
    hints: {
        'B': ['Baden-Württemberg', 'Bayern', 'Berlin', 'Brandenburg', 'Bremen'],
        'H': ['Hamburg', 'Hessen'],
        'M': ['Mecklenburg-Vorpommern'],
        'N': ['Niedersachsen', 'Nordrhein-Westfalen'],
        'R': ['Rheinland-Pfalz'],
        'S': ['Saarland', 'Sachsen', 'Sachsen-Anhalt', 'Schleswig-Holstein'],
        'T': ['Thüringen']
    },
    inlineAutocomplete: true,
});

Add & Remove

Update your hint list whenever you need it.

new Hints('#demo-add-remove');

Getting started

1. Setup your HTML.

   <input id="demo"/>

2. Add hints.css in your head.

   <link rel="stylesheet" href="hints.css">

3. Add hints.js before your closing body tag.

   <script src="hints.js"></script>

4. Initialize hints.

   new Hints('#demo');

Settings

• anyPosition

  Type: boolean

  Default: false

  If set to true any hint containing user input will be showed, no matter the position e.g. typing "cat" would match "concat"; If set to false only hints beginning with user input will be showed.

• behavior

  Type: string

  Default: 'append'

  Accepted: 'append', 'replace', 'autocomplete'

  If set to true any hint containing user input will be showed, no matter the position e.g. typing "cat" would match "concat"; If set to false only hints beginning with user input will be showed.

• caseSensitive

  Type: boolean

  Default: true

  If set to true any hint containing user input will be showed, no matter the position e.g. typing "cat" would match "concat"; If set to false only hints beginning with user input will be showed.

• emphasize

  Type: boolean

  Default: true

  If set to true any hint containing user input will be showed, no matter the position e.g. typing "cat" would match "concat"; If set to false only hints beginning with user input will be showed.

• focusOnOpen

  Type: boolean

  Default: false

  If set to true any hint containing user input will be showed, no matter the position e.g. typing "cat" would match "concat"; If set to false only hints beginning with user input will be showed.

• hints

  Type: array

  Default: empty

  If set to true any hint containing user input will be showed, no matter the position e.g. typing "cat" would match "concat"; If set to false only hints beginning with user input will be showed.

• offset

  Type: number

  Default: 16

  Number of pixels between hint box and window boundaries.

• simplePositioning

  Type: boolean

  Default: false

  If set to true expensive positioning under cursor will we omitted and hint container's left edge will be aligned with input's left bottom corner.

• trigger

  Type: string

  Default: '_'

  Character or characters that trigger displaying of popup. If you want different triggers for different hint lists define them in hints setting. If you do so, you don't need to populate this setting.

• triggerLength

  Type: integer

  Default: 1

  Number of characters that need to be typed before hint list gets displayed.

• version

  Type: string

  Default: '1.0'

  Accepted: '1.0', '1.1'

  This option corresponds to WAI ARIA specification version.

Events

• init

  Arguments: hints

  Fires after first initialization.

Methods

• add

  Arguments: new hint or hints; string, array or Object

  Add new hints.

Get it now

You will find all the code on Github.