ampproject / ampproject/amphtml
amp-autocomplete: Multiple element tokenisation
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
### Description
I would like to offer users of my website the ability to select one-or-more items from a list of suggestions, and to tokenise them as selected objects rather than plain text.
```auto-complete``` already comes quite close to this with both suggesting based on initial user input and the ```inline``` attribute that enables multiple items to be suggested and selected, so it feels a logical feature extension to that component rather than a whole new one.
Unlike ```inline``` however, selected items would be tokenised as a single selected element rather than remain as plain text, and no triggering character would be required.
Possible use cases include assigning categorisations and labels/tags to records; specifying multiple recipients in a messaging system; or perhaps a search function with advanced filtering options.
It should also be possible to pre-set tokenised elements to display on page load for the purposes of direct links into a specific setting, edit screens, and the like.
### Alternatives Considered
There are various free and commercial scripts in both vanilla JavaScript and as plugins for popular libraries/frameworks that provide such functionality, but none that would be AMP-friendly.
A particularly simple example [can be viewed here](https://www.cssscript.com/demo/tags-input-token-autocomplete/), which offers the additional functionality of being able to create a new tokenised element as well as offering from a pre-defined list: this would be a very useful option to have in some use cases.
A similar jQuery plugin is [provided here](https://www.jquery-az.com/jquery/demo.php?ex=158.0_1).
A plugin called [Tokenfield](https://sliptree.github.io/bootstrap-tokenfield/) for the Bootstrap UI framework has similar functionality and options.
### Additional Context
_No response_
Contributor guide
Research direction
The issue does not name any files, tests, or entry points. Start by locating the amp-autocomplete component and reviewing its existing inline behavior; done would require an agreed design for tokenized selections, optional pre-set tokens, and the resulting user interactions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100