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.

Docs - There is only 1 simple function

• createPlaceholderAutocomplete - the function which we use to create placeholder autocomplete.

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
• [X] 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
• [X] 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.