Autocompleting tags (UI Extension)

Autocompleting Tags in Contentful

Contentful has a concept of Tags, and these fall into their “content as metadata” approach. This means that Tags are just another type of Short-Text Field you can add, as a List. Contentful has a Tag style appearance choice for these - as in, they are rendered as “pills”.

But they don’t autocomplete!

In my experience, Tags are most useful when they autocomplete as you type things. This lets you keep some kind of consistency in your Tags across documents. Without autocomplete, you end up having “Spiderman” and “Spider man” and “Spider Man” as three different Tags :scream:

My UI extension adds a rendering option for Autocompleting tags to Contentful.


Existing tags are shown below the input field. The → key selects the top match.

Where do the tags come from?

Any documents in the Space which have a field called tags will be searched for. Their contents will then become the autocomplete suggestions for the document you’re editing.

Limitations / Future

Tags are fetched from all documents in the Contentful space every time an editor is opened for a document with this UI extension. This will probably be quite slow if you’ve got a lot of documents in the space. A nice addition would be the option to cache space tags on a Redis cache somewhere, or just in the browser’s local storage.

Code and install

GitHub

3 Likes

Thanks so much for sharing it with us @sandy! :star_struck:

This is certainly one of the coolest and most useful extensions I’ve come across. :grin:

Keep up with the great ideas!

1 Like

This looks awesome! Thank you for sharing @sandy! :grinning:

1 Like

Nice work, Thanks @sandy

Based on sandy’s code, custom a little code to match our requirements, GitHub - Lumuy/Contentful-Tags-Autocomplete-Extension

Hope this can help someone who need almost the same space level tags feature in Contentul model list field.