Native Suggestions

Datalist with native suggestions for text input fields.

You can customize native autocomplete suggestions with your own values.

• For mobile devices suggestions take part of the browser native keyboard.
• For desktop it expands native autocomplete dropdown.

| Safari | Safari | Chrome | Chrome | |---------------|---------------|---------------|---------------| |||||

Demo

Live demo

Installing

npm i @bublikus/native-suggestions

Usage

How to use:

with React
with Vue
with Svelte

...or pure js:

import NativeSuggestions from '@bublikus/native-suggestions'

const form = document.getElementById('form')
const inputs = form.querySelectorAll('input')

inputs.forEach(input => new NativeSuggestions(input))

Template example

<form id="form">
    <input name="name1" type="text"/>
    <input name="name2" type="email"/>
    <input name="name3" type="tel"/>
    <input name="name4" type="search"/>
    <input name="name5" type="number"/>
</form>

Config

new NativeSuggestions(input: HTMLInputElement, config?: Config)

// Default Config:
{
    storageKey: 'native-suggestions',
    folder: 'other',
    inputKey: null,
    listLength: 10,
    saveLength: 10,
    mobileOnly: true,
    addOnInput: true,
    inputTypes: ['text', 'number', 'search', 'email', 'tel'],
}

| Prop | Description | |-------------|--------------------------------------------------| | storageKey | General key in localStorage | folder | Specific key for a set of inputs | inputKey | Custom or generated from an input name attribute! | listLength | How many suggestions to show in select | saveLength | How many suggestions to save for 1 input | mobileOnly | I want to see only within keyboard (not dropdown) | addOnInput | Turn off if you want to use only your own values | inputTypes | Allowed types for suggestions

Custom suggestions

You can setup your own suggestions in the storage.

Turn off addOnInput if you don't want to add new values on input.

NativeSuggestions.setStore(values, config?)

// Values:
{
    name1: ['value 1'],
    name2: ['value 2', 'value 3'],
}

// Default Config:
{
    storageKey: 'native-suggestions',
    folder: 'other',
}

Behavior

On change event it puts an array of your last typed values to the localStorage under [storageKey] key and [folder] subkey specifically tying to an input based on its name attribute.

It creates next structure:

{
  [storageKey]: {
    [folder]: {
      [inputKey]: ['value 1']
    },
    other: {
      [inputKey]: ['value 2', 'value 3']
    }
  }
}

The benefit of that structure is that you can define specific suggestions for an active organization or a user.