placeholder-autocomplete

A library of placeholder autocomplete which allows you to connect to existing inputs from any library or custom ones.

How it works

1. We split text by pair separator, e.g from:someone key:value and we have: [from:someone, to:someone].
2. Then we split by key value separator, e.g [from, someone], [key, value].
3. We take first element of a pair as a key and the second one as a value.
4. We look for most fit value in the terms object by accessing it's data with the key.
5. We show the placeholder behind the input with the suggestion.

* Before attaching the placeholder we copy the css from the input so it can be as much identical it can be, it might be you need to pass your custom `styles` object.

Docs - There is only 1 simple function

• createPlaceholderAutocomplete - the function which we use to create placeholder autocomplete. it receives the following object:
  • inputId - id of the input element.
  • styles - styles object to append to the placeholder. its is optional to pass styles but if need you have full control of the styles.
  • terms - key value object which hold key as the term key and the values as rray of values to autocomplete.
  • onSuggestion - fires a callback on the next suggestion key and value

For Example:

createPlaceholderAutocomplete({
        inputId: 'input-without-container',
        terms: {
            'from': ['georgy', 'artem', 'nandato'],
            'to': ['georgy', 'artem', 'nandato'],
        },
        onSuggestion: (obj) => {
            const {key, value} = obj;

            console.log(`key is ${key}`);
            console.log(`value is ${value}`);
        }
    });

• default pair separator: (space)
• default key value separator: :
• default multiple values separator: ,

Examples

• React - https://codesandbox.io/s/material-demo-0ctk6?file=/demo.js

TODOS/IDEAS

• async fetch term values
• callback event for key,value
• allow autocomplete list also ??
  • custom
  • default list
• allow to pass custom separators
  • pair separator
  • key value separator
  • multiple values separator
• create angular example
• create react example
• create vue example
• create angular example

Issues

If you find any bug, or have anything to add or say please open an issue and i will try to solve as fast as i can;
If someone wants to help, you are more the than welcome top open pull requests :)

License

MIT License.