ampproject / ampproject/amphtml

amp-autocomplete: Multiple element tokenisation

Open
#35,487 3 comments 0 reactions 0 assignees View on GitHub
Stale Type: Feature Request WG: components
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.