duongnv-0312 / demo-textarea-autocomplete

Demo code illustrating how to do an autocomplete dropdown inside a textarea with Algolia

Textarea autocomplete demo

This is a sample project implementing a dropdown search (triggered by the @ character) directly inside a textarea using Algolia.

You can try the live demos or follow the guide to build your own.

Features

• A @mention feature where users can reference people, places, resources, ...
• A Twitter-like hashtag feature
• An 'Advanced search UI', with dynamic refinements: see Abacus blogpost

Variations

We build 4 variations on the same principle, with increasing complexity. Feel free to have a look at the code or read the guide to see how to build your own.

Basic autocomplete (source code)	With picture (source code)

Rich HTML textarea (source code)	With picture (source code)

Data

The dataset is coming from themoviedb.org and contains the list of the 500 more popular actors.

Deploy

The demo website can be deployed on GitHub pages by running npm run deploy.